在底部div中对文本进行对齐

链接到项目

我终于设法获得了我想要的标题布局，但是我无法完成的一件事，这就是左侧栏栏中文本(H2和H3(的一致性。我试图用固定的比例来做，但它会产生副作用，我认为这与旋转的文本有关。

主标题应在左下角，一行，日期应位于主标题的右侧，也应在一行上。这些组合必须对齐在左侧对齐的侧 - 主教文本的中心。

编辑：链接到布局

* {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
.wrapper-header {
  display: flex;
  background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
  position: fixed;
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, .2);
}
.side-main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  margin-top: 60px;
  width: 70px;
  border-right: 1px rgba(255, 255, 255, .2) solid;
}
.agenda-text {
  width: 100%;
  color: #FFF;
  transform: rotate(-90deg);
  text-transform: uppercase;
}
.header-main {
  display: flex;
  height: calc(100vh - 60px);
  margin-top: 60px;
}

<html>
<head>
  <title>Rataplan Improvisatietheater</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="top-nav">
    nav
  </div>
  <div class="wrapper-header">
    <div class="side-main">
      <h2 class="agenda-text">Main Title Event</h2>
      <h3 class="agenda-text">Event date 1 (month) 2018</h3>
    </div>
    <div class="header-main">
      main
    </div>
  </div>
  <div class="wrapper-content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
  </div>
</body>
</html>

非常感谢！

希望您能帮助我。

问候，杰森

这看起来并不是整体上的超级抛光，但是我相信它确实可以通过side-main的旋转来解决您的问题。

html：

<!DOCTYPE html>
<html>
    <head>
        <title>Rataplan Improvisatietheater</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="top-nav">
            nav
        </div>
        <div class="wrapper-header">
          <div class="side-main-wrapper">
            <div class="side-main">
              <h2 class="agenda-text">Main Title Event</h2>
              <h3 class="agenda-text">Event date 1 (month) 2018</h3>
            </div>
          </div>
          <div class="header-main">
                main
          </div>
        </div>
        <div class="wrapper-content">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
        </div>
    </body>
</html>

CSS：

*{
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header{
    display: flex;
    background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav{
  position: fixed;
  width: 100%;
  height: 60px;
  background: rgba(255,255,255,.2);
}
.side-main-wrapper {
  transform: rotate(-90deg);
  margin-top: 60px;
}
.side-main{
    display: flex;
    flex-direction: column;
    height: 70px;
    width: calc(100vh - 60px);
    border-bottom: 1px rgba(255,255,255,.2) solid;
}
.agenda-text{
    color: #FFF;
    text-transform: uppercase;
}
.header-main{
    height: calc(100vh - 60px);
    margin-top: 60px;
}

我没有将side-main包裹在side-main-wrapper中并旋转。然后，我只是将side-main视为常规弹性列，然后开始行为。

我向.agenda-text添加了flex: 1;和一些margin-left，然后稍微打开.side-main宽度。希望这是您要寻找的类似的东西，但只是猜测，因为您没有指定

edit ：在预览和全屏幕中看起来很奇怪...但是在实际的编辑jsfiddle屏幕中工作...也许这不是一个好的答案

编辑删除了flex：1和边缘左。我看起来像您描述的方式，但有一个问题。我认为向前迈出的一大步是在.agenda-texts周围添加一个容器，然后将其旋转而不是文本旋转。我的方法的问题在于，弹性定位是基于侧边栏的宽度，在一切都侧向侧向之前。因此，有了300px的左宽宽度，它可以工作，但宽度较小，就像您在寻找的那样。无法想象如果不做整个事情

，都会做出充分的响应

* {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
.wrapper-header {
  display: flex;
  background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
  position: fixed;
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, .2);
}
.side-main {
  height: calc(100vh - 60px);
  margin-top: 60px;
  width: 300px;
  border-right: 1px rgba(255, 255, 255, .2) solid;
}
.side-main-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform: rotate(-90deg);
}
.agenda-text {
  color: #FFF;
  text-transform: uppercase;
}
.header-main {
  display: flex;
  height: calc(100vh - 60px);
  margin-top: 60px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Rataplan Improvisatietheater</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="top-nav">
    nav
  </div>
  <div class="wrapper-header">
    <div class="side-main">
      <div class="side-main-title">
        <h2 class="agenda-text">Main Title Event</h2>
        <h3 class="agenda-text">Event date 1 (month) 2018</h3>
      </div>
    </div>
    <div class="header-main">
      main
    </div>
  </div>
  <div class="wrapper-content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：