Powiedzmy że mamy bardzo długą listę linków. Chciałbym aby ta lista łamała się na 2, 3 a może więcej kolumn. W naszym przykładzie lista będzie składać się z 20 elementów.
Taką listę można uzyskać przez emmet aby nie klepać tego samodzielnie wystarczy wpisać ul#ul>li{text $}*20
<ul id="ul">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
<li>text 4</li>
<li>text 5</li>
<li>text 6</li>
<li>text 7</li>
<li>text 8</li>
<li>text 9</li>
<li>text 10</li>
...
</ul>
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
<li>text 4</li>
<li>text 5</li>
<li>text 6</li>
<li>text 7</li>
<li>text 8</li>
<li>text 9</li>
<li>text 10</li>
...
</ul>
Chciałby aby ta lista została podzielona na dwie kolumny. Do tego użyjemy column-count Które jest wpierane nawet przez IE od wersji 10
Oczywiście też trochę upiększymy wygląd naszej listy.
ul {
border: 1px solid #cacaca;
list-style: none;
max-width: 50%;
margin: 0;
padding: 0;
column-count: 2;
column-width: 50%;
padding: 10px;
margin: auto;
}
ul li {
padding: 10px;
margin-bottom: 2px;
}
ul li:nth-child(even) {
background-color: #f0f0f0;
}
border: 1px solid #cacaca;
list-style: none;
max-width: 50%;
margin: 0;
padding: 0;
column-count: 2;
column-width: 50%;
padding: 10px;
margin: auto;
}
ul li {
padding: 10px;
margin-bottom: 2px;
}
ul li:nth-child(even) {
background-color: #f0f0f0;
}