html – 将项目堆叠在彼此之上

我正试图抓住flex,并努力创造我追求的东西.

我想做什么

>全屏容器
>两个div元素,一个右对齐,宽度为640px,另一个左对齐,占用剩余空间

发生了什么

我的元素在屏幕的中心彼此叠加显示.

码

div.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: stretch;
  height: 100vh;
}
div.hero {
  background-size: cover;
  background-position: center bottom;
  position: relative;
  height: 100vh;
  width: 100%;
  margin: auto;
}
div.timeline {
  width: 640px;
  margin: auto;
}
div.header {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  /* color: #fff; */
  -ms-transform: translate(0,-50%);
  /* IE 9 */
  -webkit-transform: translate(0,-50%);
  /* Safari */
  transform: translate(0,-50%);
  -ms-transform: translate(0,calc(-50% - 66px));
  /* IE 9 */
  -webkit-transform: translate(0,calc(-50% - 66px));
  /* Safari */
  transform: translate(0,calc(-50% - 66px));
}

<div class="flex">
 
  <div class="hero">
 
    <!-- Header -->
    <div class="header">
      <h1>Title</h1>
      <h2 class="subtitle">Subtitle</h2>
    </div>
    <!-- End header -->
 
    <!-- Timeline -->
    <div class="timeline">
      <ul class="timeline-both-side">
        <li>
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Quisque ac laoreet purus,eu dapibus ligula. Mauris nec tincidunt mi,eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
          </div>
        </li>
        <li class="opposite-side">
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed sed erat consectetur,tempor odio sit amet,euismod sapien.</p>
          </div>
        </li>
        <li>
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Lorem ipsum dolor sit amet,euismod sapien.</p>
          </div>
        </li>
        <li class="opposite-side">
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Quisque ac laoreet purus,eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
          </div>
        </li>
        <li>
          <div class="border-line"></div>
          <div class="timeline-description">
            <p>Quisque ac laoreet purus,eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- End timeline -->
 
  </div>
 
</div>

题

我如何使用flex将这两个元素(100vh)连续排在下面？

+------------------------------------------+
|.flex                                     |
|+-------------------------+ +------------+|
||.hero                    | |.timeline   ||
||                         | |            ||
||                         | |            ||
|+-------------------------+ +------------+|
+------------------------------------------+

解决方法

简单本身.

body {
  margin: 0;
}
.parent {
  height: 100vh;
  display: flex;
}
.hero {
  flex: 1;
  background: red;
}
.timeline {
  flex: 0 0 640px;
  background: green;
}

<div class="parent">
  <div class="hero"></div>
  <div class="timeline"></div>
</div>

Codepen Demo

html – 将项目堆叠在彼此之上

解决方法

猜你在找的HTML相关文章