<div class="multicol">
<h3>Заголовок</h3>
<p>Це дуже довгий список:</p>
<ul>
<li>Пункт номер 1</li>
<li>Пункт номер 2</li>
<li>Пункт номер 3</li>
<li>Пункт номер 4</li>
<li>Пункт номер 5</li>
<li>Пункт номер 6</li>
<li>Пункт номер 7</li>
<li>Пункт номер 8</li>
<li>Пункт номер 9</li>
<li>Пункт номер 10</li>
</ul>
<p>Завдяки властивості <code>break-inside: avoid;</code> список (той що ліворуч) розташований в одній колонці, хоча у першій ще залишилося для нього місце!</p>
</div>
.multicol {
background-color: lightyellow;
padding: 10px;
/* Safari and Chrome */
-webkit-column-count: 3;
-webkit-column-rule: 2px dotted coral;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 2px dotted coral;
/* CSS3 */
column-count: 3;
column-rule: 2px dotted coral;
}
.multicol ul {
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.