让 div 换行到下一行，不管它们的大小答案

【问题标题】：Making divs wrap to the next line, regardless of their size让 div 换行到下一行，不管它们的大小
【发布时间】：2013-11-15 23:53:12
【问题描述】：

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

关于如何做到这一点的任何一般提示？从屏幕截图中可以看出，其中两个 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>

任何提示？ :)

谢谢！标记

【问题讨论】：

避免使用内联样式。您的代码难以阅读。
您需要开始使用 .css 样式表。

标签： css html alignment

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

因此，第 4 个 div 容器被放置在第 1 个容器的右边缘。

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

你需要让所有的 div 容器高度相同，以避免这个问题。

【讨论】：

【解决方案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 总是从左到右在上一行最高元素的下方。

【讨论】：