css - Equally spaced divs 在 div 之间以及屏幕左右两侧的间距相同 - CSS

Question

我在宽度为 100% 的容器内有三个宽度固定为 400px 的 div

假设我们在 1920 像素的屏幕上。

剩下的空间是1920 - (400*3) = 720。所以我想让这个可用空间除以4，平均分配。所以第一个div必须在左边有180px，第一个div和第二个div之间的空间是180px，第二个和第三个div之间的空间是180px，第三个div和屏幕末端之间的空间是再次成为 180px。

div 和屏幕之间的间距应根据屏幕大小而变化。

可以用css实现吗？

示例:

Answer 1

Display:flex 就是为此而生的:)。关于容器使用:

display:flex;
justify-content:space-around;

在 child 身上，只需设置宽度、% 或静态值。

有一个解决方法是使用 text-align:justify 和 display:inline-block;如果你需要，还有伪造

测试:这里http://codepen.io/gc-nomade/pen/qcFBt/ 内部填充

文本对齐版本:http://codepen.io/gc-nomade/pen/piCtm/