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

Anonim

Когато искате да запазите колоните си с определена ширина, използвайте column-width.

section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )

Браузърът ще изчисли колко колони с поне тази ширина могат да се поберат в пространството. Помислете за column-widthпредложение за минимална ширина за браузъра.

column-widthе гъвкаво свойство. След като браузърът не може да побере поне 2 колони на посочената от вас ширина, тогава колоните ще спрат и ще попаднат в една колона.

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

Стойности

Можете да настроите column-widthдо autoили дължина.

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

За да зададете ширината на колоните, използвайте дължина, по-голяма от (или равна на) 0. Можете да използвате всяка CSS единица с изключение на процент.

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

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

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

Не забравяйте вашите префикси!