动态div对齐

Question

我应该如何处理动态 div 框，以便它会自动移动到两列中，其中有可用空间？

盒子的顺序是这样的：

1. UND：理解能量
2. EP1：储层和地质
3. EP2：探索我
4. EP3：探索二等

它已经向左浮动，并且它的父 div 具有固定的宽度以将它们显示为两列。我还在奇数元素上应用了 clear both (div.column:nth-child(odd){ clear:both;})，第三个在正确的位置下降，但第四个 div 不起作用。第四个从顶部有很多空间。

谢谢 迪彭德·辛格

Answer 1

一种解决方案是将子 div 添加到单个主 div。 然后为所有子div添加一个float left css属性 像这样：

<div>
    <div style="float:left">What ever content</div>
    <div style="float:left">What ever content</div>
    <div style="float:left">What ever content</div>
    <div style="float:left">What ever content</div>
    <div style="float:left">What ever content</div>
</div>

请注意，根据屏幕宽度和单个子 div 的宽度，此解决方案不会将列的数量限制为只有两个。所以如果你只想要两列，你应该考虑在主 div 中添加一个最大宽度样式，这会将列限制为只有两列。