조건부 CSS (div가있는 경우 set top = x, else, set top = y)

형제의 절대 "y"위치에 영향을주는 내 마크 업에서 상대적으로 위치가 지정된 div (마커라고 함)가 있습니다. 위치가 지정된 자식 div ("제목"이라고 함).조건부 CSS (div가있는 경우 set top = x, else, set top = y)

마커 div는 마크 업에 표시 될 수도 있고 표시되지 않을 수도 있습니다. 마블 div가 마크 업에있을 때 상위 위치가 100 픽셀 증가하도록 형제 하위 div에 대한 CSS를 작성하려면 어떻게해야합니까? 마커 사업부가있는 경우

여기

<div class="wrapper"> 
    <div class="marker"></div> 
    <div class="content"></div> 
    <div class="sidebar"> 
     <div class="subject"></div> 
    </div> 
</div>

은 "대상"DIV 내가 CSS에 정의 된 조건 높이를 필요로하는 하나입니다 ... 마크 업입니다. 마커 DIV하지있을 때

여기에 마크 업

<div class="wrapper"> 
    <div class="content"></div> 
    <div class="sidebar"> 
     <div class="subject"></div> 
    </div> 
</div>

출처

2010-12-01 Scott B

는 다음 작품은 ...합니까입니까?

.sidebar .subject { top: 0px; } 
.marker ~ .sidebar .subject { top: 100px; }

~은 인접 형제 선택자입니다. .marker ~ .sidebar은 클래스의 요소 뒤에 있고 동일한 부모를 공유하는 sidebar 클래스의 요소와 일치합니다.

형제 등 선택 자에 대한 훌륭한 자습서가 here입니다.

출처

2010-12-01 13:12:02 Chowlett

빙고! 고마워 :) 어떤 이유로 나는 그것이 .marker + .sidebar라고 생각하고 있었다. subject –

'+'는 _adjacent_ 형제 선택 자처럼 보입니다. 'content' div가 없다면 작동 할 것입니다. 기꺼이 도와주세요. – Chowlett

잘하면 IE6를 지원할 필요는 없겠지 만, 그렇게한다면'~'선택자가 그 브라우저에서 작동하지 않는다는 것을 알아두기 바랍니다. (고맙게도 IE7 이상에서 작동합니다) – Spudley

#wrapper > div.marker ~ div { top: 100px; }

이 당신의 마커 사업부의 모든 형제 자매에 적용해야하지만, 아마도 당신은 서로 사업부에 대해 별도의 선택기를 만들고 싶어 (아마도 당신이 가진 모든 것을 원치 않기 때문에 "최고 : 100 픽셀을;")

출처

2010-12-01 13:18:30 Jordi

조건부 CSS (div가있는 경우 set top = x, else, set top = y)

답변

관련 문제