Question

有一种模式我只想在HTML和CSS中重建：

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

你也可以在这个小提琴中编辑它： 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：

您将重复此代码的块：

SystemError: error return without exception set

使用really smart trick到Nathan Ryan，您现在可以选择任意宽度的元素，并调整其高度。

<强> CSS：

现在进行一些计算（你可以使用less或sass来动态计算并改变每行的点数）。我将在代码中发表评论，以了解这些属性的作用。

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

你可以check it out here。

..是的，我知道，熊很棒！ .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; }

在响应式布局中偏移每第n行

3 个答案: