간격/행이없는 열의 div 블록 정렬

Question

3 열 레이아웃에 여러 상자/블록이 있습니다. 상자는 float: left, width: 33%과 같은 스타일을 사용하지만 높이가 다릅니다.

필자가 열 "행"사이의 간격을 항상 채울 수 있도록하려면 어떻게해야합니까 (패널 4는 패널 1 바로 아래에 간격이 없음).

예 :

내가 폐쇄 할 1 번과 4 번 패널 사이의 간격이 항상있다

<style> 
.testpanel { width: 33%; border: 1px solid black; float:left;} 
</style> 
<div class="testpanel"> 
    Panel 1 
</div> 
<div class="testpanel"> 
    Long Panel 1 
    <br /><br /><br /> 
</div> 
<div class="testpanel"> 
    Long Panel 2 
    <br /><br /><br /> 
</div> 
<div class="testpanel"> 
    Panel 4 
</div> 

. http://gridster.net/ 같은 일부 js 라이브러리를 사용하지 않고 CSS에서이 작업을 수행 할 수 있습니까?

정적 레이아웃 (열 당 내용을 채우는 방법)에서이 방법을 알고 있지만 동적으로 패널을 생성/삭제할 것이므로 특정 열을 패널에 연결하고 싶지는 않습니다.

부트 스트랩 버전 : http://jsfiddle.net/WhKLj/1/

Answer 1

당신의 HTML은 레이아웃의 대표자 종류를 할 수있는 올바른 방법을 밤은. 대신 플로트를 사용 : 각 개별 요소 사용 세 열 div의 왼쪽

HTML :

<div class="column" id="left"> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
</div> 
<div class="column" id="center"> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
</div> <div class="column" id="right"> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
</div> 

CSS :

.column{ 
    float:left; 
} 
.testpanel{ 
    margin-bottom::10px; 
} 

이 할 것하지만 문제는 u는 자바 스크립트를 사용할 필요가있다/jquery를 사용하여 각 열에 새 div.testpanels을 추가하십시오.

희망이 도움이됩니다.