html - 不同的类似乎相互干扰

Question

我正在开发一些代码来创建“网格布局”，一切似乎都还不错，至少在第一眼看到每个类都按预期工作。

当我混合类时，即在每一行中放置一个不同的类，事情变得非常困惑，因为这些类似乎相互干扰而它们不应该(除非我遗漏了什么)。

我创建了一个 jsFiddle以及尽可能最好地说明我的问题的片段。

是什么导致了这个问题，我该如何解决？

注意:如果您尝试删除一些 div 元素，您会注意到如果不混合它们会完美对齐。

.container {
  width: 75%;
}
.grid-x2 {
  width: 47.5%;
}
.grid-x3 {
  width: 30%;
}
.grid-x4 {
  width: 21.25%;
}
.grid-x5 {
  width: 16%;
}
.grid-x2:nth-of-type(2n + 1),
.grid-x3:nth-of-type(3n + 1),
.grid-x4:nth-of-type(4n + 1),
.grid-x5:nth-of-type(5n + 1) {
  margin-right: 2.5%;
}
.grid-x3:nth-of-type(3n + 2),
.grid-x4:not(:nth-of-type(4n)):not(:nth-of-type(4n + 1)),
.grid-x5:not(:nth-of-type(5n)):not(:nth-of-type(5n + 1)) {
  margin-left: calc(2.5% - 4px);
  margin-right: 2.5%;
}
.grid-x2:nth-of-type(2n),
.grid-x3:nth-of-type(3n),
.grid-x4:nth-of-type(4n),
.grid-x5:nth-of-type(5n) {
  margin-left: calc(2.5% - 4px);
}
.grid-x2:nth-last-of-type(n + 3),
.grid-x3:nth-last-of-type(n + 4),
.grid-x4:nth-last-of-type(n + 5),
.grid-x5:nth-last-of-type(n + 6) {
  margin-bottom: 5%;
}
.grid-x2,
.grid-x3,
.grid-x4,
.grid-x5 {
  vertical-align: top;
  display: inline-block;
}

<div class="container" style="border: 1px solid red;">
  <div class="grid-x2" style="height: 25px; background-color: black;"></div>
  <div class="grid-x2" style="height: 25px; background-color: black;"></div>
  <div class="grid-x2" style="height: 25px; background-color: black;"></div>
  <div class="grid-x2" style="height: 25px; background-color: black;"></div>
  <div class="grid-x3" style="height: 25px; background-color: black;"></div>
  <div class="grid-x3" style="height: 25px; background-color: black;"></div>
  <div class="grid-x3" style="height: 25px; background-color: black;"></div>
  <div class="grid-x3" style="height: 25px; background-color: black;"></div>
  <div class="grid-x3" style="height: 25px; background-color: black;"></div>
  <div class="grid-x3" style="height: 25px; background-color: black;"></div>
  <div class="grid-x4" style="height: 25px; background-color: black;"></div>
  <div class="grid-x4" style="height: 25px; background-color: black;"></div>
  <div class="grid-x4" style="height: 25px; background-color: black;"></div>
  <div class="grid-x4" style="height: 25px; background-color: black;"></div>
  <div class="grid-x4" style="height: 25px; background-color: black;"></div>
  <div class="grid-x4" style="height: 25px; background-color: black;"></div>
  <div class="grid-x4" style="height: 25px; background-color: black;"></div>
  <div class="grid-x4" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
  <div class="grid-x5" style="height: 25px; background-color: black;"></div>
</div>

Answer 1

网格的想法是每一行都应该是独立的。

这里的主要问题是边距。 :nth-of-type(..) 适用于节点类型，因此它计算同一容器下的所有 div(它不会在您每次更改类时重置 ).

类似下面的内容

.container {
  width: 75%;
}
.grid-x2 {
  width: 47.5%;
}
.grid-x3 {
  width: 30%;
}
.grid-x4 {
  width: 21.25%;
}
.grid-x5 {
  width: 16%;
}
.grid-x2:nth-of-type(2n + 1),
.grid-x3:nth-of-type(3n + 1),
.grid-x4:nth-of-type(4n + 1),
.grid-x5:nth-of-type(5n + 1) {
  margin-right: 2.5%;
}
.grid-x3:nth-of-type(3n + 2),
.grid-x4:not(:nth-of-type(4n)):not(:nth-of-type(4n + 1)),
.grid-x5:not(:nth-of-type(5n)):not(:nth-of-type(5n + 1)) {
  margin-left: calc(2.5% - 4px);
  margin-right: 2.5%;
}
.grid-x2:nth-of-type(2n),
.grid-x3:nth-of-type(3n),
.grid-x4:nth-of-type(4n),
.grid-x5:nth-of-type(5n) {
  margin-left: calc(2.5% - 4px);
}
.grid-x2:nth-last-of-type(n + 3),
.grid-x3:nth-last-of-type(n + 4),
.grid-x4:nth-last-of-type(n + 5),
.grid-x5:nth-last-of-type(n + 6) {
  margin-bottom: 5%;
}
.grid-x2,
.grid-x3,
.grid-x4,
.grid-x5 {
  vertical-align: top;
  display: inline-block;
}

<div class="container" style="border: 1px solid red;">
  <div class="grid-x2" style="height: 50px; background-color: black;"></div>
  <div class="grid-x2" style="height: 50px; background-color: black;"></div>
</div>
<div class="container" style="border: 1px solid red;">
  <div class="grid-x2" style="height: 50px; background-color: black;"></div>
  <div class="grid-x2" style="height: 50px; background-color: black;"></div>
</div>
<div class="container" style="border: 1px solid red;">
  <div class="grid-x3" style="height: 50px; background-color: black;"></div>
  <div class="grid-x3" style="height: 50px; background-color: black;"></div>
  <div class="grid-x3" style="height: 50px; background-color: black;"></div>
</div>
<div class="container" style="border: 1px solid red;">
  <div class="grid-x3" style="height: 50px; background-color: black;"></div>
  <div class="grid-x3" style="height: 50px; background-color: black;"></div>
  <div class="grid-x3" style="height: 50px; background-color: black;"></div>
</div>
<div class="container" style="border: 1px solid red;">
  <div class="grid-x4" style="height: 50px; background-color: black;"></div>
  <div class="grid-x4" style="height: 50px; background-color: black;"></div>
  <div class="grid-x4" style="height: 50px; background-color: black;"></div>
  <div class="grid-x4" style="height: 50px; background-color: black;"></div>
</div>
<div class="container" style="border: 1px solid red;">
  <div class="grid-x4" style="height: 50px; background-color: black;"></div>
  <div class="grid-x4" style="height: 50px; background-color: black;"></div>
  <div class="grid-x4" style="height: 50px; background-color: black;"></div>
  <div class="grid-x4" style="height: 50px; background-color: black;"></div>
</div>
<div class="container" style="border: 1px solid red;">
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
</div>
<div class="container" style="border: 1px solid red;">
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
  <div class="grid-x5" style="height: 50px; background-color: black;"></div>
</div>

---

另一种方法是仅使用网格项来调整大小(没有边距)并使用 box-sizing:border-box 和 paddings 创建间距。但他的实际样式需要内部元素。

---

最新的(在现代浏览器上也是最好的)是使用 flexbox。(参见 https://philipwalton.github.io/solved-by-flexbox/demos/grids/)