Question

我正在使用Flexbox在容器中每行显示三张卡片（ .column-layout-card ）。

对于每第四张卡（第一行中的第一张），我将margin-left设置为0，对于第一行之后的每张卡，我添加margin-top: 25px。这很有效，因为更多的卡动态添加到容器中。

现在，我正在进行“翻转”效果，您可以点击卡片上的按钮，然后使用另一张卡片取代它。此卡（附加类 .column-layout-cards-instructions ）将在标记之后直接跟随，并将设置为display: none，直到按钮点击触发它为止。

隐藏的卡片就像我的CSS中的所有其他卡片一样被计算。所以，例如，因为它可能是连续的第一张卡，它可以得到margin-left: 0 - 但是因为它实际上替换了前一行中的第三张卡，所以它需要左边距是第三张卡通常会有。我已经能够通过创建一个脚本来修复这个问题，该脚本复制当前卡的边缘，将其分配给隐藏的卡，然后切换。

问题在于隐藏的卡片仍然会弄乱卡片的顺序，因此会弄乱卡片的定位。

CSS：

.info-cards .column-layout-card:nth-child(3n+1) {
  margin-left: 0;
}

.info-cards > .column-layout-card:nth-child(n+4) {
  margin-top: 25px;
}

Answer 1

我不知道nth-child和nth-of-type无法应用于特定的类。

对我来说有用的是使用section而不是div用于 .column-layout-cards-instructions ，然后将我的CSS换成：< / p>

.info-cards > div:nth-of-type(3n+1) {
    margin-left: 0;
}

.info-cards > div:nth-of-type(n+4) {
    margin-top: 25px;
}

它有点hacky，但它完成了这项工作。如果有人有一个更优雅的解决方案，我会暂时将我的回答计算为正确。

隐藏的Flexbox元素w / jQuery可见性切换 - 如何保持正确的定位

1 个答案: