Dynamische CSS Multi-Spalten-Liste innerhalb eines festen Breite Containers

Question

ich eine Liste mit x-Achse Überlauf bauen will, in dem jedes Listenelement in einer neuen Spalte innerhalb des übergeordneten div angezeigt wird, hat dies jsfiddle ein Beispiel:

https://jsfiddle.net/h06h5jzy/1/

Dies ist mein aktueller Code:

#testDiv{ 
    width:200px; 
    height:200px; 
    background:#DDD; 
} 

ul{ 
    width:100% 
    list-stype-type:none; 
    padding:0; 
    overflow:visible; 
} 

ul li{ 
    width:100%; 
    background:blue; 
    text-align:center; 
    float:left; 
    display:inline; 
} 

Mit dem CSS mehrspaltigen Attribute wird nicht funktionieren, weil ich eine dynamische Anzahl von Elementen auf der Liste haben werden. Ich habe auch Float versucht: links für die Listenelemente, ohne Erfolg.

Wie kann dies erreicht werden?

Answer 1

Gefällt mir?

#testDiv {} 
 

 
ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    width: 200px; 
 
    height: 200px; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    overflow: visible; 
 
} 
 

 
ul li { 
 
    width: 100px; 
 
    height: 100%; 
 
    background: blue; 
 
}

<div id="testDiv"> 
 

 
    <ul> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 
    <li>Testing</li> 
 

 
    </ul> 
 

 

 
</div>