如何使用CSS :nth-child伪类实现3-2循环排列布局？

你的目标是实现“3个元素一行、2个元素一行”的循环排列，核心是精准选中每组开头需要清除浮动的元素，我们先拆解需求再修正代码：

问题分析 #

你提到需要选中的清除浮动元素序列是1、4、6、9、11、14……，可以拆解为两类：

• 第一类：每组3个元素的开头（1、6、11……），只需clear: left
• 第二类：每组2个元素的开头（4、9、14……），需要clear: left + margin-left: 83px

这两类元素的周期是5（3+2），所以可以用5n + x的公式来匹配，而不是你当前用的3n+1和6n+4（后者会重复匹配元素，导致样式冲突）。

修正后的代码 #

/* 匹配第1、6、11...个元素（每组3个的开头） */
li.hex:nth-child(5n + 1) {
  clear: left;
}

/* 匹配第4、9、14...个元素（每组2个的开头） */
li.hex:nth-child(5n + 4) {
  clear: left;
  margin-left: 83px;
}

逻辑解释 #

• 5n + 1：当n=0时是1，n=1时是6，n=2时是11……正好对应每5个元素周期里的第1个，也就是新一组3元素的开头。
• 5n + 4：当n=0时是4，n=1时是9，n=2时是14……对应每5个元素周期里的第4个，也就是新一组2元素的开头，添加左侧margin是为了让这组2个元素和3元素组的视觉中心对齐。

关于calc的疑问 #

你提到是否需要用calc，其实完全不需要——:nth-child的公式已经能精准匹配目标元素，calc更多用于动态计算长度值，在这里用不到。

内容的提问来源于stack exchange，提问作者Juan Camilo Orjuela