CSS - dinamik sütun

Question

sarma Tek liste

Olası Çoğalt: Bu çözüm arıyordu ve o kadar ben ne sevdirmek sonrası düşündüm bulamadım
CSS: Ways to break list into columns on page?

Hazırlanmak

Tek bir liste oluşturmaya çalışıyordum; 5. öğenin ardından liste sarılacak ve başka bir sütuna geçecek. Bu, kullanıcının ihtiyaç duyduğu kaç öğe ile süper dinamik olabilir. İşte

Ben ile geldi çözümdür. İşte

li{ 
 
    position: relative; 
 
    line-height: -6px; 
 
} 
 
    
 
ol li:nth-child(6) { 
 
    margin-top: -90px; 
 
} 
 
    
 
ol li:nth-child(-n+5){ 
 
    margin-left: 0em; 
 
} 
 
    
 
ol li:nth-child(n+6){ 
 
    margin-left: 10em; 
 
}

<ol> 
 
     <li>Aloe</li> 
 
     <li>Bergamot</li> 
 
     <li>Calendula</li> 
 
     <li>Damiana</li> 
 
     <li>Elderflower</li> 
 
     <li>Feverfew</li> 
 
     <li>Ginger</li> 
 
     <li>Hops</li> 
 
     <li>Iris</li> 
 
     <li>Juniper</li> 
 
</ol> 
 
    
 
    
 

Fiddle var: Benim çözümün sizce ne http://jsfiddle.net/im_benton/tHjeJ/

?? IE'de çalışacak bir çözüm nedir?

Answer 1

Aşağıdakileri @tuff önerilen olarak kullanmayı deneyin.

ol { 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    column-count: 2; 
    column-gap: 20px; 
} 

http://jsfiddle.net/tHjeJ/6/

Answer 2

Onun kadar zor sadece Listenizdeki böyle bir şey deneyebilirsiniz iki sütun istiyorsanız:

ol{ width:300px;} 

li{ 
    width:50%; 
    float:left; 
}​ 

Aslında liste öğelerinin eşit sayıda sarmak istiyorum Li numarası sütun sayısına göre bölerse her sütun.

sen sayma her sütun için sarma div'leri kullanmak ve sonra listenizde start özelliği kullanabilirsiniz resminizi gibi olmak istiyorsanız bu soruyu kontrol ettiniz şey start="6"