CSS : 부동시 divs 높이 무시

Question

일부 사진을 표시하려고합니다. 모두 폭은 같지만 높이가 다릅니다. 모든 사진의 클래스 이름은 내가 플로트를 지정한 스타일 시트에서 그림

<img class = "pic" src = .... /> 

입니다

: 내가 좋아하는 뭔가를 할 노력하고있어 왼쪽 속성 :

.pic{ 
    float:left 
} 

끝을 결과는 이전에 행에서 가장 높은 div 다음에 모든 행이 수직으로 정렬되는 동안 예상 된 결과가 아닙니다.

순수 크로스 브라우저 CSS에서 내 문제를 해결할 방법이 있습니까?

Answer 1

CSS3 column-count과 함께 추가 마크 업없이 최소한 하나의 요소 만 포함한다고 가정하면됩니다.

데모 : http://jsfiddle.net/ThinkingStiff/NcxPr/

HTML :

<div id="container"> 
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" /> 
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" /> 
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" /> 
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" /> 
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" /> 
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" /> 
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" /> 
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" /> 
</div> 

CSS :

#container { 
    column-count: 3; 
    column-fill: balance; 
    column-gap: 10px; 
    width: 330px; 
} 

.image { 
    display: block; 
    margin-bottom: 10px; 
    width: 100px; 
} 

출력 :

Answer 2

슬프게도 CSS2/3에서는이 작업을 수행 할 수 없습니다.

여기 은 float: top;을 에뮬레이트하고 잘 작동하는 매우 작은 스크립트입니다.jQuery Masonry입니다.

Answer 3

추가 마크 업을 추가 할 수 있습니까?

그래, 당신이 부동 div의 3 열을 만들 수있는 경우 :

<div class="column"> 
    <img src="1.jpg" /> 
    <img src="4.jpg" /> 
</div> 

<div class="column"> 
    <img src="2.jpg" /> 
    <img src="5.jpg" /> 
</div> 

<div class="column"> 
    <img src="3.jpg" /> 
    <img src="6.jpg" /> 
</div> 

또는 당신을 위해 그렇게 할 jQuery를 사용합니다.