防止浮动div包装错误

Question

这些内部div的宽度相同，但高度可变。外部div是可变的，因此我们不知道每行上将容纳多少个。我想防止不必要的换行，如以下出色的艺术示例所示：

在没有Java脚本的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上使用inline-block而不是float和vertical-align：top：

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