Пропорциональное сжатие

Удобный способ размещения в одну строку известного количества блоков. Основан на процентном задании ширины блоков.

Пояснение:

3 блока растянутся каждый на 33% ширины резинового блока-контейнера, независимо от его текущих размеров. Overflow:hidden препятствует схлопыванию блока, содержащего флоатные элементы. Box-sizing:border-box позволяет в дальнейшем задавать блокам внутренние отступы без изменения их общей ширины.

Неизвестное количество блоков

Данный способ позиционирования хорошо подходит, например, для горизонтального меню, которое должно растягиваться на всю ширину страницы, но количество ссылок в котором неизвестно или может меняться. Само меню задается в виде списка, а позиционируется как таблица.

Стили для ссылок могут быть любыми в зависимости от требуемого дизайна.

Пояснение:

Список представляется в стилях как ряд таблицы, а его пункты как ячейки таблицы с заведомо большой шириной, что позволяет равномерно распределить их по всей странице в один ряд. При этом пунктов в списке может быть сколько угодно, они не нарушат позиционирования, а просто перераспределят между собой свободное пространство поровну.

Центрирование элемента неизвестной ширины

Предположим, у нас есть то же самое меню, но мы не хотим растягивать его во всю страницу, а расположить по центру. Логично было бы использовать свойство margin:auto, однако, оно подходит лишь для блочных элементов известной ширины.
Проблему можно решить с помощью тех же таблиц. Присвоим списку свойство display:table и его ширина станет равной ширине контента, сколько бы его не было.

Элементы фиксированной ширины

Иногда встает задача равномерно расположить в строке блоки фиксированной ширины таким образом, чтобы расстояние между ними пропорционально изменялось при расширении или сужении окна браузера. Она очень просто решается с применением технологии flex и свойства justify-content. Но можно решить ее и по старинке. Единственный минус — требуется лишний «мусорный» элемент.
Разметка:

Пояснение:

Мы просто задали блокам строчно-блочное представление, а контейнеру, содержащему их, выравнивание контента по всей ширине. Дополнительный пустой блок в конце контейнера со стопроцентной шириной призван растянуть эту конструкцию на всю ширину страницы.
Позиционировать таким образом можно любое количество блоков с фиксированной шириной, которое вмещается в ширину родительского элемента или страницы. «Лишние» блоки будут спускаться на следующую строку.


Вам будет интересно:

Вертикальное выравнивание блоков в CSS

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован