Làm thế nào để float div trong CSS?

Question

Tôi có danh sách này bằng HTML và tôi muốn đặt hàng theo cột. Tôi đã cố gắng sử dụng phao nổi nó mang lại cho tôi điều này:

EDIT: Chiều cao của những <li> là undefined, nhưng tôi muốn C dưới đây B, E dưới đây E và G dưới đây F mà không cần thay đổi cấu trúc và thay đổi thứ tự. Tôi không muốn sử dụng vị trí tuyệt đối. Tôi tự hỏi nếu có các giải pháp khác.

HTML:

<ul> 
    <li class="item">A</li> 
    <li class="item">B</li> 
    <li class="item">C</li> 
    <li class="item">D</li> 
    <li class="item">E</li> 
    <li class="item">F</li> 
    <li class="item">G</li> 
<ul> 

OUTPUT (sử dụng float: left; width: 240px; border-left: 1px solid #EEE):

Những gì tôi muốn là giống như dưới đây, mà không thay đổi HTML vì Tôi đã sử dụng thứ này ructure để làm cho đáp ứng.

Có thể không?

Answer 1

Bạn có thể sử dụng CSS cột và lề dưới trên thẻ LI đầu tiên, like this.

ul { 
    column-count:4; 
    padding:0; 
    column-rule: solid lightgray 1px; 
} 

li { 
    display:inline-block; 
    width:100%; 
} 

li:before {/* demo purpose to set an height to lis */ 
    content:''; 
    float:left; 
    padding-top:50%; 
} 

li:first-of-type { 
    margin-bottom:50%; 
} 

Bạn có thể cần tiền tố JavaScript hoặc thêm tiền tố của nhà cung cấp theo cách thủ công.