Html 动态div的对齐

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

框的顺序如下所示：

UND：理解能量

EP1：水库和地质

EP2：探索i

EP3：勘探ii等

它已经向左浮动，其父div具有固定的宽度，可以将它们显示为两列。我还对奇数元素应用了clear-both（

div.column:nth-child（odd）{clear:both；}

），第三个元素位于正确的位置，但第四个div不起作用。第四个从顶部开始有很多空间

谢谢 迪潘德辛格

---

一种解决方案是将子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中，这将限制列仅为两个。