html - 防止 float div包裹错误

Question

这些内部 div 的宽度都是相同的，但高度是可变的。外层的 div 是流动的，所以我们永远不知道每一行能容纳多少个。我想防止不必要的换行，如这个精美的艺术示例所示:

有什么方法可以在没有 Javascript 的情况下在 CSS 中做到这一点？这是我现在拥有的:

.outer_div {
    overflow: hidden;
    text-align: left;
}
.inner_div {
    float: left;
    width: 200px;
}

Answer 1

如果你在父容器上使用 CSS flexbox 并允许其内容环绕，即设置 flex-wrap: wrap，你应该能够实现你想要的布局。

这是一个概念验证示例，使用 ES6 简单地为各个盒子生成随机高度以用于演示目的。

const elements = Array.from(document.querySelectorAll('.inner_div'));

elements.forEach(element => {
  element.style.height = `${Math.round(Math.random() * 100) + 50}px`;
});

.outer_div {
  display: flex;
  flex-wrap: wrap;
}

.inner_div {
  width: 200px;
  margin: 5px;
  height: 50px;
  background-color: steelblue;
}

<div class="outer_div">
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
</div>