html - div之间的动态空间

Question

所以我得到了一个 Div，它的宽度设置为 100% 宽度，这意味着它可以是各种尺寸。那个 div 的值是“min-width:950px”，所以它的宽度大小不能低于 950。

在那个div里面我有2行，每行包含4个div-具有特定的宽度值

现在发生的情况是，当低分辨率的人进入我的网站时，他可以看到 4 个 div 很好地组合在一起：

但是当有高清晰度的人进入我的网站时，它是这样的：

我想要做的是，当高分辨率的人进入我的网站时，4 个 div 将彼此占用相同的空间，所以它看起来像这样：

我怎样才能做到这一点？提前致谢！

Answer 1

CSS 样式

#container {
  text-align: justify;
  min-width: 950px;
  border: solid 1px Black; // Change this
}

#container div {
  width: 100px; //Change this
  display: inline-block;
  background: red; // Change this
}

#container:after {
  width: 100%;
  display: inline-block;
}

HTML 元素

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Codepen（沙盒）：http ://codepen.io/anon/pen/HdtiC

原文：http: //css-tricks.com/equidistant-objects-with-css/