CSS：如何控制浏览器收缩+ Floats时会发生什么

Question

我正在测试一些随机个人项目的代码，我正在寻找并排放置3个盒子（我相信作为div）。但是你会发现它们并没有真正居中（如三个）/间隔得那么好。我想为他们分配唯一的ID并增加填充但是有更有效的方法吗？

同样当屏幕缩小时，第三个盒子在下面蘸水，而第二个盒子仍然在我想要的同一行上，所以所有盒子同时掉落。

不幸的是，我需要更多的声誉来以适当的格式发布我的代码。

Answer 1

如果我找到你的话，不是100％确定。

对于＆＃34; 但是你会发现他们并没有真正集中（三个）/间隔得那么好。我想为它们分配唯一的ID并增加填充但是有更有效的方法吗？＆＃34;如果你想让它们水平居中，你可以试试这个：

1. 将它们包装在容器节点中。
2. 以此样式为此容器分配width。
3. 将此容器的margin-left和margin-right设置为auto

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

对于＆＃34; _当屏幕缩小时，第三个盒子在下面蘸水，而第二个盒子仍然在我想要的同一行上，所以所有盒子同时掉落。 _＆＃34;，或许width: calc(100% / 3)是你想要放在这些方块的样式中的。

Answer 2

在现代网络浏览器中，即使@Slash_D响应正确，您也可以使用flexbox进行更灵活的对齐（这里有完整的指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。

此外，如果您希望所有容器同时丢弃，您必须直接处理基于分辨率（https://www.w3schools.com/css/css_rwd_mediaqueries.asp）的媒体查询，或者使用网格系统（如bootstrap）来帮助您处理媒体基于classess（https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works）

的查询

希望有所帮助