Html 防止浮动div缠绕错误

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

有没有办法在没有Javascript的CSS中做到这一点？以下是我现在拥有的：

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

---

如果在父容器上使用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\u div{
显示器：flex；
柔性包装：包装；
}
.内务部{
宽度：200px；
保证金：5px；
高度：50px；
背景颜色：钢蓝色；
}
我想出来了，谢谢大家的帮助！唯一需要的更改是在内部div上使用inline block而不是float和vertical align:top，如下所示：

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

提供一个可能不清楚的例子——外部分区是流体的，所以我们永远不知道每行可以容纳多少个分区。另外，该网站没有使用jQuery，所以我宁愿避免使用它，这就是为什么我问它是否可以在没有JavaScript的情况下完成。浮动是必须的，我认为使用flex很容易吗？使用flexbox并允许包装应该可以。然后不要使用浮动，例如使用inline block或FlexBoxInterest，虽然框的宽度都是固定的，为200px，并不总是4适合一条线。@CaymanServer在这种情况下，宽度一点也不重要：我只是选择25%作为概念证明。