Bố cục kiểu Masonry CHỈ với CSS

Question

Như bạn có thể thấy trong hình, mỗi ô có chiều cao khác nhau và có một số ô có chiều rộng gấp đôi.

Có thể tạo ra một bố cục nề kiểu chỉ với CSS?

Answer 1

Với sự hỗ trợ css3 bạn có thể làm điều này:

http://jsfiddle.net/huAxS/2/

.container { 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 10px; 
    column-count: 2; 
    column-gap: 10px; 
    width: 360px; 
} 

.container div { 
    display: inline-block; 
    width: 100%; 
    background-color: red; 
}​ 

Với không hỗ trợ CSS3, bạn phải dùng đến js không may.

Answer 2

Tôi đang làm việc trên một trang web ngay bây giờ với cùng một loại bố cục, hai cột có hộp đôi không thường xuyên. Những gì tôi làm chỉ là tách biệt hai mặt với phần còn lại của nội dung. Ví dụ:

<div class="two-columns"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="double-wide"> 
</div> 
<div class="two-columns"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Sau đó, bạn có thể áp dụng giải pháp cột CSS3 cho lớp two-columns. Nếu bạn cần hỗ trợ IE9, bạn sẽ cần phải thêm một số JavaScript fallback.