html - 垂直堆叠 div 并保持 2 列布局

Question

我想在一侧有两个堆叠的 div，然后在另一侧有一个与左侧 div 具有相同 height 的列s.

有点像这样:

我有两个 div 和一个边栏，但是这两个 div 不会堆叠。

这是我目前所拥有的Fiddle

@import url(https://fonts.googleapis.com/css?family=Oxygen);
 body {
  background-color: #222;
}
.description h1 {
  text-align: left;
  padding: 20px;
}
#wrapper {
  text-align: center;
}
.description,
.sidebar,
.demo-container {
  display: inline-block;
  vertical-align: top;
}
.description {
  background: #eee;
  width: 50%;
  font-family: "Oxygen";
  font-size: 14px;
  color: #000;
  line-height: 1.2;
}
.sidebar {
  background: #eee;
  width: 15%;
  height: 575px;
}
.demo-container {
  background: #eee;
  width: 50%;
  font-family: "Oxygen";
  font-size: 14px;
  color: #000;
  line-height: 1.2;
}

<div id='wrapper'>
  <div class="demo-container">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
  </div>
  <div class="description">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
  </div>
  <div class="sidebar">
  </div>
</div>

Answer 1

你把事情复杂化了很多，这里有一个你想要使用 flexbox 的基本演示

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.flex {
  display: flex;
  flex-basis: 100%
}
.fl {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 5px;
  justify-content: space-between
}
.flex-item {
  border: 1px solid black
}
.flex-item:not(:first-of-type) {
  margin: 10px 0 0
}
.sidebar {
  border: 1px solid black;
}

<div class="flex">
  <div class="fl">
    <div class="flex-item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit</p>
    </div>
    <div class="flex-item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit
        ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus.
        Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.</p>
    </div>
  </div>
  <div class="fl sidebar"></div>
</div>