浮动div低于合作伙伴

Question

考虑以下HTML结构，

<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>

使用以下CSS

.floated {
  width: 50%;
  float: left;
}

#div1 {
  height: 300px;
  background-color:red;
}

#div2 {
  height: 30px;
  background-color: green;  
}

#div3 {
  height: 30px;
  background-color: yellow; 
}

这样，#div1将占据页面左侧300 up高的部分，而#div2和#div3将被浮动到页面的右侧。我如何设置我的CSS，使#div1和#div2占据一行(高度300 up，两者的最大高度)，而#div3将放置在#div1的正下方？

我没有控制这些div的高度，这是动态的，有时第一个只有20个像素，第二个是1000个像素，而反过来也是一个可能性。

这里有一个小提琴：https://jsfiddle.net/1u55fukj/

Answer 1

您可以在父元素上使用Flexbox (本例中为body)，也可以使用flex-wrap: wrap。这将使同一行中的两个div都等于或等于一个较高的DEMO的高度。

​

body {
  display: flex;
  flex-wrap: wrap;
}
.floated {
  flex: 0 0 50%;
}
#div1 {
  height: 300px;
  background-color: red;
}
#div2 {
  background-color: green;
}
#div3 {
  height: 30px;
  background-color: yellow;
}

<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>

​

Answer 2

如果行中只有2个div，那么可以尝试将clear:left交给odd child。

​

.floated {
  width: 50%;
  float: left;
}
#div1 {
  height: 300px;
  background-color: red;
}
#div2 {
  height: 30px;
  background-color: green;
}
#div3 {
  height: 30px;
  background-color: yellow;
}
div.floated:nth-child(odd) {
  clear: left
}

<div class='floated' id='div1'>

</div>
<div class='floated' id='div2'>

</div>
<div class='floated' id='div3'>

</div>

​

Answer 3

我认为柔性箱是你最好的选择。

您可以使用div容器，然后使用display flex。

​

.container{
  height: 500px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.floated {
  width: 50%;
}

#div1 {
  height: 30%;
  background-color:red;
}

#div2 {
  height: 60%;
  background-color: green;  
}

#div3 {
  height: 40%;
  background-color: yellow; 
}

<div class="container">
  <div class="floated" id="div1"></div>
  <div class="floated" id="div2"></div>
  <div class="floated" id="div3"></div>
</div>

​

您还可以将第3次div和更多:D. Flexbox具有良好的交叉浏览支持使用-moz-，-webkit-等，