css - 动态(流体)间隔的多行元素(如对齐)

Question

我想实现这个:

这些只是容器内具有流体动态宽度的任何元素。 我想将 N 个元素放在一行中，它们之间有动态间距，所以 我的布局总是连续 4 个，而且响应迅速。

诀窍是每行不使用任何包装元素，只使用带有任何 CSS 的最小 DOM。

Live Playground

Answer 1

您需要使用 % 宽度和边距。

类似这样的内容(取自您的示例):

ul{ list-style:none; }

li{ 
  float: left;
  display:block;
  width:21.7%; 
  height:50px; 
  background:red; 
  margin: 0 4.4% 4.4% 0;
}
li.z{
  margin-right: 0;
}

li:nth-child(2n){ 
  background:blue; 
}

请注意，我为您的最后一个元素添加了一个“z”类，即每 4 个。

HTH.