Броя на колоните - CSS-трикове

Anonim

Ако имате нужда от точен брой колони, когато проектирате оформление с много колони, използвайте column-count.

.lead ( column-count: 3; )

Като се има предвид броят на колоните, браузърът ще разпредели равномерно съдържанието точно в този брой колони.

Това свойство може да се използва и в стенографията за columnsи може да се използва в тандем с column-width. Когато и двете свойства са декларирани, column-countе максималният брой колони.

Стойности

column-countможе да бъде autoили цяло число.

Използвайте, autoако също използвате column-width. Мислете за това като за начин да кажете на браузъра, да оставите да column-widthпоемете водещата роля.

Цялото число, известно още като брой колони, трябва да бъде по-голямо или равно на 0.

За разлика от column-widthтова свойство ще съдържа броя на колоните, независимо от ширината на браузъра. Това означава, че ако сте извадили 5-колонна подредба на мобилния си телефон, ще имате много притискана 5-колонна подредба за навигация. column-countработи най-добре заедно column-width.

Поддръжка на браузър

Поддръжка на оформление с няколко колони:

Chrome Сафари Firefox Опера IE Android iOS
Всякакви 3+ 1,5+ 11.1+ 10+ 81 3.2+

Не забравяйте вашите префикси, ако вече не използвате инструмент, който помага за това.