Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Свойство column-width

.

Свойство column-width

Свойство column-width по смыслу похоже на min-width для ваших колонок. Браузер разобьет элемент на такое количество столбцов, по крайней мере, указанной ширины, на какое сможет — пока не будет превышено значение свойства column-count. Если колонки потребуется сделать шире, чтобы заполнить все пространство, то они будут шире. К примеру, если родительский элемент имеет ширину 400 рх, ширину поля мы установили равной 10 рх, а ширина колонки объявлена равной 150 рх, браузер сможет разбить элемент на две колонки: (400 рх общая ширина — 10 рх поле) / 150 рх ширина колонки = 2,6.

Браузер округляет это число вниз до ближайшего целого (2), делая колонки настолько широкими, насколько возможно в отведенных границах — т.е. 195 рх для каждой колонки (общая ширина минус промежуток между колонками, деленная на число колонок). И даже если свойство column-count было бы равно 3, здесь все равно были бы только две колонки, поскольку места недостаточно для включения трех колонок заданной ширины. Иными словами, свойство column-count обозначает максимальное число колонок.

Единственная ситуация, в которой колонка может быть уже значения свойства column-width, — это когда сам родительский элемент настолько узок, что не может вместить даже одну колонку указанной ширины. В этой ситуации вы получите одну колонку, которая займет всю ширину родительского элемента. Неплохая идея — указывать значение свойства column-width в масштабируемых единицах em1, чтобы обеспечить минимальное число знаков в каждой строке колонки. Добавим свойство column-width со значением 9ет к нашим колонкам контента:

Свойство column-width

Теперь, если вы увеличите размер шрифта на сайте, вы увидите, как уменьшается число колонок для поддержания удобства чтения (рис. 9.6).

Свойство column-width

Рис. 9.6. Указывая ширину колонки в масштабируемых единицах, мы гарантируем минимальное число знаков в строке

.

Читайте так же:
Not found