Question

如何将nth-child属性实现为帖子在循环中显示的三列布局。

现在我想为

指定第n个子属性

1st,4th,7th,10th,13th child respectively and so
and
2nd,5th,8th,11th,14th child respectively and so on 
and 
3rd,6th,9th,12th ,15th child respectively and so on

用于不同的CSS

Answer 1

您可以像这样使用nth-child。我在演示中将它全部用作div。

<强> HTML

<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
<div>7</div><div>8</div><div>9</div>
<div>10</div><div>11</div><div>12</div>
<div>13</div><div>14</div><div>15</div>

<强>的CSS：

div {width:33%; background:grey; height:50px; float:left;}
div:nth-child(3n-1){background:green;}
div:nth-child(3n){background:blue;}

<强> DEMO

Answer 2

假设所有孩子都是李，你可以像这样使用nth-child。

CSS代码：

ul > li:nth-child(3n+1){
   /*whatever your property may be*/
  background-color:orange;    
}

ul > li:nth-child(3n+2){

   background-color:white;    
}

ul >li:nth-child(3n){    
   background-color:green;
}

JS FIDDLE

n-child属性为三列布局设计？

2 个答案: