防止浮动 div 换行错误答案

【问题标题】：Prevent floating divs from wrapping wrong防止浮动 div 换行错误
【发布时间】：2019-04-13 03:33:30
【问题描述】：

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

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

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

【问题讨论】：

提供minimal reproducible example
也许不清楚——外部 div 是流动的，所以我们永远不知道每行能容纳多少。此外，该网站没有使用 jQuery，所以我宁愿避免这种情况，这就是为什么我问它是否可以在没有 JavaScript 的情况下完成。
浮动是必须的吗，我认为这很容易使用 flex？
使用 flexbox 并允许包装应该可以工作。
然后不要使用浮点数，使用例如内联块或弹性框

标签： html css css-float

【解决方案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>

【讨论】：

有趣的是，这些框都是 200px 的固定宽度，但并不总是 4 个可以排成一行。
@CaymanCarver 在这种情况下，宽度根本不重要：我只是选择了 25% 作为概念验证。

【解决方案2】：

我想通了，谢谢大家的帮助！唯一需要改变的是在内部 div 上使用 inline-block 而不是 float 和 vertical-align:top，如下所示：

.inner_div {
    display: inline-block;
    vertical-align: top;
    width: 200px;
}

【讨论】：