不同的类好像互相干扰

Question

我正在开发一些代码来创建 "grid layout" 一切似乎都很好，在至少乍一看每个人 class 按预期工作。

当我混合 classes 时，即在每一行中放置不同的 class，事情变得非常混乱，因为 the classes 似乎干扰了彼此 而他们不应该（除非我遗漏了什么）.

我创建了一个 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（ 它不会在您每次更改 class 时重置）。

类似下面的内容

.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/）

不同的类好像互相干扰

Different classes seem to interfere with each other

html

css

grid-layout