动态div的对齐

Question

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

方框的顺序如下：

1. UND：了解能源
2. EP1：水库和地质学
3. EP2：探索我
4. EP3：探索ii等等

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

由于 Dipender Singh

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添加最大宽度样式，这会将列限制为仅两列。