html - CSS:如何控制浏览器缩小+ float 时发生的情况

Question

我正在为一个随机的个人元素测试一些代码，我希望并排放置 3 个盒子(我相信是 div)。但是正如您将看到的那样，它们并没有真正居中(三个)/间隔得很好。我想为它们分配唯一的 ID 并增加填充，但有更有效的方法吗？

此外，当屏幕缩小时，第三个盒子会下降到下方，而第二个盒子仍在同一条线上，我希望所有盒子同时掉落。

不幸的是，我需要更多的声誉才能以正确的格式发布我的代码。

Answer 1

不能 100% 确定我是否理解正确。

对于“但正如您将看到的那样，它们并没有真正居中(如三个)/间隔得很好。我想为它们分配唯一的 ID 并增加填充，但有没有更有效的方法？"，如果你想让它们水平居中，你可以试试这个:

1. 将它们包装在容器节点中。
2. 在其样式中为该容器分配一个宽度。
3. 将此容器的 margin-left 和 margin-right 都设置为 auto

这应该使这 3 个盒子(实际上是容器)水平居中。

对于“_另外，当屏幕缩小时，第三个盒子会下降到下面，而第二个盒子仍然在同一条线上，我希望所有盒子同时掉落。_”，也许 width: calc( 100%/3) 是您要放入这些框的样式中的内容。