Stack divs垂直＆amp;保持2列布局

Question

我想在一侧有两个堆叠的div，然后在另一侧有一个列，与左height的{​​{1}}相同。

有点像这样：

我有两个div和一个侧栏，但两个div不会叠加。

这是我到目前为止Fiddle

＆＃13;

＆＃13;

div

＆＃13;

@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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

你很复杂，这里是你想要的基本演示flexbox

＆＃13;

＆＃13;

*,
*::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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将for bin 2 (whose value is -3.938), ` \sum p(1) = dos2[i=0,5][k=2][j=1] i.e. -7.918e-34+-1.856e-33+-4.011e-34+-2.455e-33. 放在其他两个div之前，然后将它们全部浮动。请参阅小提琴https://jsfiddle.net/y71tkmtw/1/

<div class="sidebar"></div>

Answer 3

只需在左侧的2个div周围添加另一个<div>，使用float：left。添加浮动：右侧到侧边栏。

      .left-container
      {
        width: 85%;
        float:left;

      }      
      .sidebar {
        background: #eee;
        width: 15%;
        height: 575px;
        float:right;
      }    

小提琴：https://jsfiddle.net/dncgytef/2/