css - 制作四个大小相同的盒子，水平显示并在屏幕上居中响应，最简单的解决方案是什么？

Question

什么是最简单的解决方案来制作四个大小相同的盒子，这些盒子内联（水平）显示并在整个屏幕中居中响应？

我有四个大小相同的 div，内联显示并始终位于中心，这意味着它们在左侧始终具有相等的边距并写入屏幕。我希望它能够响应。我已经尝试过 flex-box，但我在浏览器与 css3 的兼容性方面遇到了问题。

Answer 1

我不知道这是否是绝对“最好”的方式。但这样的事情肯定会奏效。

div {
   width: 22%; //adjust as necessary
   margin-right: 4%; //adjust as necessary
   float: left;
   height: 5em; //adjust or remove as necessary 
}

div.last { //alternatively you could consider using the :last-child selector
   margin-right: 0;
   float: right;
}

您必须将“last”类应用于 last div。或者，div:last-child如果它们都包含在父元素中，则可以使用。

此外，在调整边距/宽度时，请确保它们保持相对。widthx4 + margin-rightx3 应该始终 = 100（假设没有填充或边框）。