使用公式的第n个孩子

问题描述：

你好我有6个缩略图，每个缩略图都有相同的类别。我想第二，第五有margin-left:36px;和第三和第六有83px。使用公式的第n个孩子

，所以我写的CSS这样

.commitee-members{ 
    margin:10px 15px; 
} 
.commitee-members-outers:nth-child(3n+2) .commitee-members{ 
    margin-left: 36px; 
} 
.commitee-members-outers:nth-child(3n+3) .commitee-members{ 
    margin-left: 83px; 
}

我不知道为什么，但第5级了margin-left:83px，他六年级没有必须margin-left:83px。，所以我查了一些工作，但此时其工作我的继承人的情况下

https://jsfiddle.net/bheoqL9e/1/

，你可以看到，它搞砸

但这项工作 https://jsfiddle.net/crgruyu3/ 的工作，请大家帮忙

答

这将在您的代码中选择第3和第6个元素。

.commitee-members-outers:nth-child(4n+3) .commitee-members{ 
    margin-left: 83px; 
}

waw tq buddy 。不知道这个公式保存我的案例 – antonscie

不客气！ – Vcasso

答

该元素内有8个子女：3 .commitee-members-outers,1 .clearfix,3 .commitee-members-outers,1 .clearfix。所有这些元素都被选中。

您可以对.clearfix元素使用不同的标签，并使用:nth-of-type来仅计算.commitee-members-outers。

<body> 
    <div class="commitee-members-outers"></div> 
    <div class="commitee-members-outers"></div> 
    <div class="commitee-members-outers"></div> 
    <hr class="clearfix" /> 
    <div class="commitee-members-outers"></div> 
    <div class="commitee-members-outers"></div> 
    <div class="commitee-members-outers"></div> 
    <hr class="clearfix" /> 
</body>

jsFiddle

我需要div class clearfix来使它成为1行事件，每个coloumn具有不同的高度。我试着用你的代码

但它没有工作。 – antonscie

小提琴没有任何CSS。 Div和HR都是可以用相同方式设计的元素：[jsFiddle]（https://jsfiddle.net/bheoqL9e/3/） – Whothehellisthat

希望这可以说明真正的问题是什么：无论如何：P – Whothehellisthat

答

其因<div class="clearfix"></div>遮住第n个孩子财产。尝试使用其他方法来对齐&。

使用公式的第n个孩子

相关推荐