div를 사용하여 브레이크 : nth-child는 적절하게

Question

divs를 서로 옆에 쌓고 세 개의 하위 요소 뒤에 div를 나누기를 원합니다.

예 HTML :

이

<div class="wrap"> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
    <a> hello </a> 
</div> 

CSS :

.wrap a { 
    float:left; 
} 

.wrap a:nth-child(4n) { 
    clear:left; 
} 

jsFiddle를 참조하십시오. 첫 번째 행은 3 개의 하위 div가 서로 나란히 표시되어 잘 표시됩니다. 그러나 두 번째 줄에는 3을 가져야 할 때 4 개의 div가 있습니다. :nth-child을 올바르게 사용하여 3 개의 div 만 서로 쌓아 두도록하려면 어떻게해야합니까?

Answer 1

사용 nth-child(3n+1)는 :

Answer 2

.wrap a { 
 
    float:left; 
 
} 
 

 
.wrap a:nth-child(3n+1) { 
 
    clear:left; 
 
}

<div class="wrap"> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
</div>

설명 : 공식 (an + b) 사용. 설명 : a represents 사이클 크기, n은 카운터 (starts at 0)이고, b은 오프셋 값입니다.

.wrap a { 
 
    float:left; 
 
} 
 

 
.wrap a:nth-child(3n+1) { 
 
    clear:left; 
 
}

<div class="wrap"> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
    <a> hello </a> 
 
</div>