Question

是的，所以基本上，我有一个在线商店的设置，它从数据库中提取所有项目，然后将它们打印为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>

任何提示？：）

谢谢！标记

Answer 1

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

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

Answer 2

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

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

为了演示这一点，请在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将始终从上一行最高元素下方的左侧向右移动。

将div包装到下一行，无论其大小如何

3 个答案: