Ширина стовпця - 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+

Не забудьте свої префікси!