不同的类似乎互相干扰

时间：2016-07-12 23:57:30

标签： html css css3 grid-layout

我在开发一些代码以创建 "grid layout" 的过程中，一切似乎都没问题，至少乍一看每个班级按预期工作。

当我混合使用类时，即在每一行中放置一个不同的类时，事情会变得相当混乱，因为类似乎会相互干扰，而它们不应该（除非我“我错过了什么”。

我创建了一个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>

1 个答案:

答案 0 :(得分：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/）

相关问题
最新问题