부동 div 두 열 레이아웃 공백

Question

나는 고정 된 너비와 알 수없는 높이를 가진 X 게시물을 하나의 div-wrapper에서 두 개의 열이되도록하고 싶습니다. 그러나, 나는 그 (것)들을 좌로 좌로 둘 때, 이것은 일어난다.

내가 빈 공간을 제거하는 방법

?

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

그것을 :

Answer 1

는 다음

Answer 2

시도가 두 번째 블록 이후에 추가 ... left DIV 컨테이너와 right DIV 컨테이너를 확인하고 간단하게 float: left을 사용하는 대신 다음에 게시물을 추가 트릭을 수행해야합니다

Answer 3

맑음 : 오른쪽 블록을 짝수로하고 맑게 : 이상한 것들로 남겨주세요!

<style type="text/css"> 
    .odd { float: left; clear: left; } 
    .even { float: right; clear: right; } 
</style> 

<div class="odd">content</div> 
<div class="even">content</div> 
<div class="odd">content</div> 
<div class="even">content</div> 
<div class="odd">content</div> 

Answer 4

사용 :nth-child(odd) {clear:both;}

Working DEMO

CSS

.outer {border:solid #f00; padding:10px;overflow:auto} 
.outer div{border:solid 1px #f00; float:left; margin:5px} 
.outer div:nth-child(odd) {clear:both;} 

HTML

,

<div class="outer"> 
    <div > 
    content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br></div> 
<div > 
    content content content content <br>content content content content <br>content content content content <br> 
</div> 
<div > 
    content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br> 
</div> 
<div> 
    content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br> 
</div> 
<div > 
    content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br> 
</div> 
    </div>