CSS'de nasıl yüzer?

Question

Bu listeyi HTML'de aldım ve sütunlar halinde sipariş vermek istiyorum. Bunun beni veriyor şamandıralar kullanılmadan çalıştı bu:

DÜZENLEME: Bu <li> ait Yükseklik tanımsız ama yapısını değiştirmek ve sırasını değiştirmek olmadan F altında E ve G aşağıda B altında C, E istiyoruz. Pozisyon mutlakını kullanmak istemiyorum. Başka çözümler olup olmadığını merak ediyorum.

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> 

ÇIKIŞ (float: left; width: 240px; border-left: 1px solid #EEE kullanarak): Ben daha aşağıda böyledir istiyorum ne

, HTML çünkü değiştirmeden Ben zaten bu st duyarlılık yapmak.

mümkün mü?

Answer 1

İlk LI etiketi olan like this numaralı belgede CSS sütununu ve kenar boşluğunu kullanabilirsiniz.

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%; 
} 

JavaScript ön ekleyicisine veya satıcı öneki eklemeye manüel olarak gereksinim duyabilirsiniz.