html - float 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 将占据页面左侧 300px 高的部分，而 #div2 和 #div3将 float 到页面的右侧。我如何设置我的CSS，所以#div1和#div2占用一行(高度300px，最大高度two), 而 #div3 会被放在 #div1 的正下方吗？

我不是在控制这些div的高度，这个是动态的，有可能有时候第一个只有20px，第二个1000px，反过来也是一种可能性

这是一个 fiddle :https://jsfiddle.net/1u55fukj/

Answer 1

您可以在父元素(在本例中为 body)上使用 Flexbox 并使用 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>