使 div 换行到下一行，无论其大小如何

Question

对，所以基本上，我有一个在线商店的设置，它从数据库中提取所有项目，然后将它们打印为div，以便它们可以很好地对齐在一起。我的问题是，我不知道如何使它们很好地包裹在容器中：http://puu.sh/5j4Er.png

关于如何做到这一点的任何一般提示？从屏幕截图中可以看出，其中两个div一直粘在右侧，可能是因为左侧的div更大。

容器是：

<div style='padding-bottom: 140px; display: block; float: left; margin-top: 20px; width: 100%;'><h2 style='margin-bottom:20px;'>$desc</h2>

每个div 是 ：

<div style='width:".$size."px; display: block; margin-top: 10px; float: left;'>
                            <table width='".$size."px' cellspacing='10'>
                                <tr>
                                    <td colspan='2'><a href='$shop?buy=$id'><h2>$item[name]</h2></a></td>
                                </tr>
                                <tr>
                                    <td><a href='$shop?buy=$id'><img src='$item[img]' style='width:64px;height:64px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 3px 3px 3px;border-bottom-color:#333366;border-bottom-width:2px;border-color:initial;border-left-color:#333366;border-left-width:2px;border-right-color:#333366;border-right-width:2px;border-style:initial;border-top-color:#333366;border-top-width:2px;box-shadow:rgba(0, 0, 0, 0.496094) 3px 3px 3px;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;' /></a></td>
                                    <td><a href='$shop?buy=$id'><h3><b>Prix:</b> $item[price]</h3></a>$item[description]</td>
                                </tr>
                            </table>
                        </div>

有什么提示吗？ :)

谢谢！马克

Answer 1

计算容器的宽度。将div 的宽度乘以 3。从容器的宽度中减去它。将其除以 2。

这是第一列和第二列右侧的填充。然后使用 css nth-child（） 选择器从所有具有 3 倍数的子div 中删除填充，以摆脱第 3 列的填充，这样它们就不会浮动到下一行。

Answer 2

该行为最可能的原因是第一个div 容器（"Citoyennete sur Aerium"）的高度大于下一个div 容器（"Adoptez une chauve-souris"）。

结果，第 4 个div 容器被放置在第一个容器的右边缘。

为了演示这一点，请将边框/轮廓添加到div 容器以查看边缘。

您需要使所有div 容器的高度相同以避免此问题。

Answer 3

将div而不是容器从 float:left 切换到 display:inline-block 。

http://jsfiddle.net/TreeTree/EK2H8/

div {
    width:200px;
    background:orange;
    display:inline-block;
    /*float:left;*/
    margin-right:10px;
    margin-bottom:10px;
    vertical-align:top;
}

如果您取消注释float行，您应该能够重现您看到的问题。 inline-block将始终从左到右位于前一行最高元素的下方。