3 열 레이아웃의 중간에있는 요소 지우기

Question

3 열 레이아웃이 있고 중간 열에 3 개의 div가 있어야하지만 사이드 바의 내용이 중간 div의 내용보다 "길다" 상자는 "가장 긴 div"아래로 바로 뛰어옵니다.

<div style="float: left; width: 15%; background-color: yellow;"> 
<p>left</p> 
<p>left</p> 
<p>left</p> 
</div> 
<div style="float: right; width: 15%; background-color: pink;"> 
<p>right</p> 
<p>right</p> 
<p>right</p> 
<p>right</p> 
</div> 
<div style="margin-left: 20%; margin-right: 20%;"> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
    <div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
    <div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
<div style="clear: both;"></div> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
    <div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
<div style="clear: both;"></div> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
    <div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 

다음

더 나은 이해를 위해 jsfiddle에 코드입니다 : 여기 내 코드입니다. 누군가 제게 "지우는"것을 설명 할 수 있다면 기쁠 것입니다.

편집 : 나는 당신이 매 3 명 div의 후이이 튜토리얼 http://css.maxdesign.com.au/floatutorial/tutorial0406.htm

Answer 1

중간 div가 블록 레벨 요소로 표시되고 사이드 바 div의 콘텐츠와 함께 푸시되는 이유입니다. 왼쪽으로 띄우고 적절한 너비를 추가하여 문제를 해결하십시오. 중간 div 폭 = 20 % + 20 % 여백 + 15 % + 15 % 사이드 바 폭 = 70 % + 30 % 중간 div = 100 %.

http://jsfiddle.net/DyHGP/5/

Answer 2

그것은 다음과 같은 이유로의를 따랐다.

<div style="clear: both;"></div> 

지우기는 float 인 것의 바로 아래에 요소를 떨어 뜨리는 데 사용됩니다. 클리어 사용 : 둘 다; 왼쪽 또는 오른쪽으로 떠있는 모든 항목을 지우는 것입니다.

빠른 수정은 이러한 요소를 제거하고 가운데 열에있는 div의 너비를 30 %로 늘려 네 번째 줄을 다음 줄로 밀어 넣는 것입니다.