UL + CSS cho bố trí lưới

Question

Tôi có một máy chủ tạo ra html như:

<ul> 
    <li><!-- few nested elements that form a block --></li> 
    <li><!-- few nested elements that form anaother block --></li> 
    <li><!-- etc, X times --></li> 
</ul> 

Tất cả các khối đã được biết đến rộng 200px và chiều cao chưa biết. Tôi muốn <li> được bố trí theo kiểu bảng giống như như thế này: css

Những gì tôi có bây giờ là sau đây:

li { 
    display: block; 
    width: 200px; 
    float: left; 
    margin: 10px; 
} 

Tất cả là tốt ngoại trừ việc các cột không được bình đẳng Chiều cao. Và trong ví dụ trên khối # 4 “cướp” ở vị trí # 1 và kết quả không phải là những gì tôi đang cố gắng để đạt được:

Có thuần CSS qua trình duyệt như vậy sẽ cho phép lưới cách bố trí tôi muốn và sẽ không thực thi thay đổi đánh dấu?

Answer 1

Inline blocks có thể hữu ích ở đây.

Answer 2

Lựa chọn 1: Cung cấp cho họ cao rõ ràng

Tùy chọn 2: Sử dụng nth-child (trong đó có hỗ trợ giới hạn)

Answer 3

Trong ví dụ của bạn, bạn dường như muốn cho mỗi hàng cùng một chiều cao của li lớn nhất ở chỗ hàng. Nếu chiều cao này là biến mà bạn muốn chỉ có thể với nth-child:

li:nth-child(3n+0) { clear: left; }