html - 在响应式布局中每隔第 n 行偏移一次

Question

有一个模式我只想用 HTML 和 CSS 重建:

正如我想象的那样，我需要一组元素(此处显示为点)，这些元素彼此相邻并具有特定的边距。然后，我可以尝试为开始新行的每个第 n 个点实例添加更大的边距，以抵消它所在的行。我在这里创建了一个示例:

wrapper {
  width: 100%;
}
.dot {
  width: 150px;
  height: 150px;
  margin: 15px;
  border-radius: 50%;
  display: inline-block;
  background-color: #999;
}
.wrapper .dot:nth-child(4n) {
  margin-left: 100px;
  background-color: #dd77dd;
}

<div class="wrapper">
  <div class="dot">Element 1</div>
  <div class="dot">Element 2</div>
  <div class="dot">Element 3</div>
  <div class="dot">Element 4</div>
  <div class="dot">Element 5</div>
  <div class="dot">Element 6</div>
</div>

你也可以在这个 fiddle 中编辑它: https://jsfiddle.net/jessicajordan/j8238oo6/8/

此设置完全适用于固定宽度的布局，例如当包含点元素的 .wrapper 容器具有预定义的固定宽度时。 但是，我想让容器宽度响应(例如，将其设置为 100% 宽度并通过视口(viewport)大小调整其宽度)，这意味着点行可以包含不同数量的点元素，具体取决于.wrapper 容器。因此，每次 .wrapper 容器大小更改时，开始新行并且应该通过使用比其他点更大的边距为其添加偏移量的点元素将是不同的。

如果仅在 HTML + CSS 中可行:如何为元素的每 2 行添加一个偏移量并在不同的容器大小中保留此布局？只需提及:点元素本身应具有固定宽度，并且不应随 .wrapper 容器缩放。

Answer 1

仅使用 CSS 且无需媒体查询即可偏移每个奇数行的一种方法是使用 shape-outside属性(property)。
请注意，此属性为 candidate recomendation因此有 low browser support .

这是一个最多支持 5 行的示例:

.wrapper {
  width: 100%;
}
.wrapper div {
  width: 50px;
  height: 50px;
  margin: 50px;
  border-radius: 50%;
  display: inline-block;
  background-color: #000;
  text-align: center;
}
.wrapper:before {
  content: '';
  float: left;
  width: 75px;
  height: 9999px;
  -webkit-shape-outside: polygon(0px 150px, 75px 150px, 75px 300px, 0 300px, 0px 450px, 75px 450px, 75px 600px, 0px 600px);
  shape-outside: polygon(0px 150px, 75px 150px, 75px 300px, 0 300px, 0px 450px, 75px 450px, 75px 600px, 0px 600px);
}

<div class="wrapper">
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
</div>