响应式设计中的第 n 个子“碰撞”/创建流体网格

Posted 2023-03-06

【中文标题】响应式设计中的第 n 个子“碰撞”/创建流体网格

【英文标题】：nth-child "collisions" in a responsive design / creating a fluid grid

【发布时间】：2013-02-27 00:14:06

【问题描述】：

我的网站有一个网格系统，最初设置的样式应用于网格中的每六个项目

li:nth-child(5n+1) margin-left:0 

我正在使我的网站具有响应性，并且我在其中指定了一个断点

li:nth-child(3n+1) margin-left:0 

但问题是它仍然在解释以前的 5n+1 样式，这是我不想要的。我如何告诉 CSS 忽略该样式。或者更好的是，我如何创建一个流体网格，以便每当 li 项目是连续的第一个项目时，它的左边距为 0，而所有其他项目的边距为 25 像素？

【问题讨论】：

li margin-left: 25px; li:first-child margin-left: ?

不幸的是，无法设置新行中最先出现的浮动元素的样式。 :first-child 只是在您的 html 代码中处理第一个子项，而不是在显示的行中。您是否尝试为:nth-child(5n+1) 重置margin-left: 25px？

您需要将该边距（可能作为负值）应用于父元素。看看 Twitter 是如何使用 Bootstrap 实现的。

ZURB/Foundation 做了同样的事情@isherwood 提到来处理它的 n-up 块网格。您对网格中的所有元素应用相同的边距/填充，然后用相等的负值偏移容器。边距，但实际的答案是你需要用特异性超过它......

@mheavers 这个演示可能会有所帮助：codepen.io/cimmanon/pen/dwbHi

【参考方案1】：

在 5n+1 上重置边距的问题是我不确定 5n+1 是否取代 3n+1 或反之亦然 - 因为在第 15 个元素处，这些样式规则会发生冲突。

它们同样具体，因为您一次只处理每个规则的一个 :nth-child() 选择器，因此您需要将 5n+1 规则放在断点中的 3n+1 规则之前，并重置边距在您的 5n+1 规则内的任何非零值。这样，3n+1 规则将优先于同时匹配这两个规则的元素。

没有办法使用 CSS 选择一行中的第一项，因为它不知道一行中的第一项是什么。如果您知道要使用的确切边距并且您没有太多的断点需要处理，那么这是一个不错的选择。

【参考方案2】：

试试：

li:nth-child(5n+1):not(:nth-child(3n+1)) margin-left:0 

:not 选择器按照它在锡上所说的做，并且不会选择与括号内的选择器匹配的元素。

此外，如果两条规则发生冲突且均无优先级，则将使用 CSS 中最后出现的规则。 在样式表中将li:nth-child(5n+1) 放在li:nth-child(3n+1) 之后可能会更简单。

编辑：@cimmanon 对您的问题的评论是一种非常好的替代方法。

【讨论】：

那将是 :not(:nth-child(3n+1)) - li 是多余的，会破坏 CSS3 浏览器的选择器。见***.com/questions/10711730/…

【参考方案3】：

通过在父元素上使用负边距，您可以在不需要媒体查询的情况下做出响应：

http://codepen.io/cimmanon/pen/dwbHi

.gallery 
  margin: -10px 0 0 -10px;
  overflow: hidden;


.gallery img 
    margin: 10px 0 0 10px;
    float: left;

【讨论】：

我喜欢这个解决方案，但我讨厌我们应该应用 hacks*、tricks* 或任何其他方式来完成这样的简单事情......也许应该重新考虑 css*