2016-08-31 4 views
0

안녕하세요 각 축소판에 대해 동일한 클래스를 가진 6 개의 미리보기가 있습니다. 나는 2 번째, 5 번째가 margin-left:36px;이고 3 번째와 6 번째가 83px이되기를 바란다.수식을 사용하는 n 번째 자식

그래서 내가 왜 잘 모릅니다이

.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; 
} 

같은 CSS를 쓸 수 있지만 5 클래스는 margin-left:83px있어 그는 6 클래스 didnt 한이 margin-left:83px 있습니다. 그래서 내가 어떤 운동에 확인하지만, 당신이 볼 수있는이 시간은 작업 을 heres 내 경우

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

는 그것는

을 엉망하지만이 연습 https://jsfiddle.net/crgruyu3/ 의 작업에

도와주세요

답변

0

코드에서 3 번째와 6 번째 요소를 선택합니다.

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

waw tq buddy . didnt는이 공식을 나의 사례를 제외하고 안다 – antonscie

+0

당신은 환영 받다! – Vcasso

1

해당 요소 내에 8 명의 자녀가 있습니다. 3 .commitee-members-outers, 1 .clearfix, 3 .commitee-members-outers, 1 .clearfix. 이러한 모든 요소는 선택기에 대해 계산됩니다.

.clearfix 요소에 대해 다른 태그를 사용할 수 있으며을 사용하면 .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

+0

나는 1day 이벤트를 만들기 위해 div 클래스 clearfix가 필요하다. 각 coloumn은 다른 높이를 가진다. 나는 당신의 코드


로 시도하지만 그 didnt 작업. – antonscie

+0

바이올린에는 css가 없습니다. Divs와 HR은 거의 같은 방식으로 스타일을 지정할 수있는 요소입니다. [jsFiddle] (https://jsfiddle.net/bheoqL9e/3/) – Whothehellisthat

+0

어쨌든 이것은 실제 문제가 무엇인지를 보여주기를 바랍니다. P – Whothehellisthat

0

그것은 <div class="clearfix"></div> 때문에 n 번째 자식 속성을 방해한다. 다른 방법으로 &을 부서에 맞게 정렬하십시오.

관련 문제