html - 在另一个 div 上对齐 div

Question

我有这个CSS代码:

.row {
    width:100%;
    height:100px;
}

.square {
    width:100px;    
    height:100px;
}

我想在 div 行内放置 5 个正方形 div，但我想把它放在 justified 中，这样正方形之间的间隔应该相等，具体取决于用户的窗口大小。

我想知道什么会更好，margin、float、positioning absolute/relative 等

Answer 1

如果在这种情况下可以硬编码，您可以:

.square {
  margin: calc(10% - 50px);
  }

边距是:

整个宽度的 20% 减去元素宽度的 100px 除以 2(有两个边距)。

注意(感谢@randak):mobile compatibility and very old ie might lack calc() support

在写完我的答案后，我在 http://css-tricks.com/equidistant-objects-with-css/ 找到了一个花很多心思解决这个问题的方法，您可能想要检查一下。