在响应式布局中每隔 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>

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

此设置对于固定宽度的布局非常有效，例如当包含点元素的.wrapper 容器具有预定义的固定宽度时。 但是，我想让容器宽度响应（例如将其设置为 100% 宽度并使其宽度可根据视口大小调整），这意味着点的行可以包含不同数量的点元素，具体取决于.wrapper 容器。因此，开始新行的点元素应该通过使用比其他点更大的边距来为其添加偏移量，每次.wrapper 容器大小发生变化时都会是不同的。

如果仅在 HTML + CSS 中可行：如何为每第二行元素添加偏移量并在不同的容器大小中保留此布局？顺便提一下：点元素本身应该有一个固定的宽度，并且不应该随着.wrapper容器的大小而缩放。

Answer 1

仅使用 CSS 而无需媒体查询偏移每个奇数行的一种方法是使用 shape-outside 属性。
请注意，此属性为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>

Answer 2

这是您可以查看的另一种方法：

HTML

<div class="wrapper">
  <div class="float-right"></div>
  <div class="float-left"></div>
  <div class="float-right"></div>
  <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 class="dot">Element 7</div>
  <div class="dot">Element 8</div>
  <div class="dot">Element 9</div>
  <div class="dot">Element 10</div>
  <div class="dot">Element 11</div>
  <div class="dot">Element 12</div>
</div>

CSS

wrapper {
  width: 100%;
}
.dot {
  width: 150px;
  height: 150px;
  margin: 15px;
  border-radius: 50%;
  display: inline-block;
  background-color: #999;
}

.float-left, .float-right {
  border: doted blue 1px; /* temporary */
  width: 100px;
  height: 180px;
}
.float-left {
  float: left;
  clear: right;
}
.float-right {
  float: right;
  clear: left;
}

您无需尝试在某些元素上设置边距，而是在页面中创建浮动“障碍物”以将点向左或向右移动。

您可以根据需要显示任意数量的浮动 div，但问题是当使用较小的屏幕分辨率时，当它们在页面底部变得“无点”时，您必须隐藏它们。我认为您可以通过媒体查询或引导类来管理它，根据屏幕分辨率调节浮动 div 的数量。

Answer 3

好吧，这让我思考了一下，但我认为我得到了一些相当可接受的东西，它适用于各种环境、页面大小和任意数量的点。

它虽然有一个限制！您必须固定每行的点数。

让我们看看，我选择在一整行上使用 9 个点，这使得计算变得非常容易，因为你必须将你的宽度分成你选择的任意数量的点 + 1，因为总是有半个点的宽度空间在左侧或右侧。

HTML：

您将重复这些代码块：

  <div class="container">
      <div class="dummy"></div>
      <div class="element">
      </div>
  </div>

通过Nathan Ryan 的really smart trick，您现在可以选择任意宽度的元素，并且它们的高度会适应。

CSS：

现在进行一些计算（您可以使用 less 或 sass 来动态计算并更改每行的点数）。我将在代码中注释以了解这些属性的作用。

.container {
    display: inline-block;
    position: relative;
    /* As i want to calculate for 10 dots i have to make a dot + margin take up
    exactly 10% of the document's width, here i chose a 3/4 ratio per dot*/
    width: 7.5%;    
    margin-right: 2.5%;
}


/* Here you have to choose every (rowLength)*2 and add 1 or (rowLength) + 1, 
depending which line you want your offset to start */
.wrapper .container:nth-child(18n+10) {  
    /* And finally align it half of a dot's complete size*/
    margin-left: 5%;
}
.dummy {
    margin-top: 100%;
}
.element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    display: inline-block;
    background-color: #f1ea75;
}

你可以check it out here。

..是的，我知道，熊太棒了！ (ง⚆ᴥ⚆)ง