CSS 하위 플로팅 부모 float

왼쪽에 세로 막대, 오른쪽에는 2 열 레이아웃이 있습니다.CSS 하위 플로팅 부모 float

그래서 사이드 바를 왼쪽으로 떠서 오른쪽의 내용에 여백을 둡니다. 모두 괜찮아요. ...

콘텐츠의 하위 요소에 명확한 정보가 적용될 때까지 사이드 바 아래로 이동합니다.

부모 컨테이너 내에서 어린이 요소 만 뜨고 지울 수있는 방법이 있습니까?

사진 1000 개 단어를 가치로

, 여기에 JSFiddle입니다 :

http://jsfiddle.net/qRYYm/1/

출처

2012-08-28 ahren

http://jsfiddle.net/qRYYm/2/ – Peter

@PeterSzymkowski 내에서 명확한 - 당신을했다 먼저 jsfiddle에서 'Update'를 누르는 것을 의미합니까? – ahren

물론, 죄송합니다 – Peter

것을 볼 수 너 맞아.

출처

2012-08-28 22:32:21

완벽한. 왜 이것이 효과가 있는지 좀 더 설명해 주시겠습니까? – ahren

DIV를 포함하면 플로팅 요소가 들어있을 때 가장 높은 요소 높이까지 늘어나지 않습니다. 오버플로 추가 : 자동 (또는 숨김 또는 스크롤)을 사용하면 확장됩니다. 더 많은 정보는 여기에 있습니다 : http://www.quirksmode.org/css/clearing.html –

DIV의'overflow'의 기본값은 무엇입니까? – Justin

무엇 이것에 대해 : 당신이 .content에 overflow:auto;을 추가하는 경우

aside{ 
    position: absolute; 
    height: 300px; 
    width: 100px; 
}

http://jsfiddle.net/qRYYm/2/

출처

2012-08-28 22:28:12 Peter

그게 제가 한 일입니다.하지만 절대 위치 지정을 사용하지 않고도 가능합니까? – ahren

맑은 것을 사용하지 마십시오. 당신은 오버 플로우를 사용할 수 있습니다

<div class="content"> 
    <div class="one">One</div> 
    <div class="two">Two</div>  
</div> 

.content { float: left; overflow: hidden; width: 900px; } 
aside { float: left; width: 100px; }

또한 주요 컨테이너 숨겨진, 당신은 여백 왼쪽 사용하지 않아야합니다 : 왼쪽 열에서 멀리 컨텐츠를 밀어 100 픽셀입니다. 둘 다 떠 다녀라. 나는 열이 주 포장지에있는 것을 좋아한다. 그렇게 냉담 해.

출처

2012-08-28 22:37:16 ZombieCode

두 왼쪽 모두 두 번째 열이 나머지 너비를 차지하는 것을 허용하지 않습니다 ... ie; 융통성이있다. – ahren

이렇게하면됩니다. 어떤 DIV (들)에 플로트를 적용 할 때

.left{float:left;} 
.right {float:right;} 
.clear{clear:both;} 

<div> 
    <div class="left">SideBar</div> 
    <div class="right"> 
      <div> 
       <div class="left">content 1</div> 
       <div class="left">content 2</div> 
       <div class="clear"></div> 
      </div> 
    </div> 
    <div class="clear"></div> 
</div>

, 부모 DIV에 넣어와 같은 부모 DIV

출처

2012-08-30 13:43:46 Dashrath

이렇게하면'.right'가 나머지 너비를 차지하도록 확장되지 않습니다 ... – ahren

CSS 하위 플로팅 부모 float

답변

관련 문제