防止浮动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>

Answer 2

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

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