CSS: Bỏ qua chiều cao div khi nổi

Question

Tôi đang cố gắng hiển thị một số hình ảnh. Tất cả chúng đều có cùng chiều rộng nhưng chiều cao khác nhau. Tôi đang cố gắng để làm một cái gì đó như:

tên lớp của mỗi bức tranh là pic

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

Trong stylesheet tôi đã chỉ định các float: thuộc tính trái:

.pic{ 
    float:left 
} 

Sự kết thúc kết quả không phải là kết quả mong đợi trong khi mỗi hàng được căn chỉnh theo chiều dọc sau div cao nhất từ ​​hàng trước:

Có cách nào để giải quyết vấn đề của tôi trong css trình duyệt chéo thuần túy không?

Answer 1

Bạn có thể thực hiện việc này mà không cần đánh dấu thêm với CSS3 column-count, giả sử bạn ít nhất có một phần tử chứa duy nhất.

Demo: 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; 
} 

Output:

Answer 2

Đáng buồn thay, bạn không thể làm điều này với CSS2/3.

Có làjQuery Masonry, một tập lệnh khá nhỏ mô phỏng float: top; và hoạt động tốt.

Answer 3

Bạn có thể thêm một số đánh dấu bổ sung không?

Nếu có, bạn có thể làm 3 cột với divs nổi:

<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> 

Hoặc chỉ cần sử dụng jQuery để làm điều đó cho bạn.