Question

我终于设法获得了我想要的标题布局，但有一件事我无法完成，那就是左侧边栏中文本（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>

非常感谢提前！

希望你能帮助我。

此致杰森

Answer 1

这看起来并不是一个整体，但我相信它确实通过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视为常规弹性列，并开始表现。

Answer 2

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

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

编辑取出flex：1和margin-left。我已经让你看起来如何描述，但有一个问题。我认为向前迈出的一大步是在.agenda文本周围添加一个容器，然后旋转它而不是文本。我的方法的问题是，在一切都转向侧面之前，柔性定位是基于侧边栏的宽度。所以左边的条形宽度就像300px一样，但它的宽度比较小，就像你正在寻找的那样。无法想象完全响应而不做整件事

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

在底部div处对齐文本

2 个答案: