CSS Guru

Бывает, возникает вопрос (по «вине» дизайнеров или заказчиков), что картинки надо расположить по �?ирине страницы (ну или родительского контейнера) равномерно, то есть первая (для читающих слева направо) картинка должна быть выровнена по левому краю, последняя – по правому, а остальные – находится друг от друга и от крайних на одинаковом расстоянии. Вот как-то так:

Самый простой вариант, который я сам использую – это использовать таблицу. Это, так скажем, не самое правильное использование таблицы, но зато самое простое и наименее времезатратное, что бывает важно.

Создадим табличку на пять ячеек и в каждую поместим по картинке. Выровняем картинки по центру ячеек (td {text-align: center}), а таблицу растянем на всю �?ирину (table {width: 100%})

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

Как и следовало ожидать, и как и должно было произойти (такова природа таблиц: для ячеек, содержащих боль�?е отводится боль�?ее место), пустые ячейки сжались до минимальной �?ирины. Поэтому для ячеек с картинками создадим класс, которому зададим свойство width:1%. Опять воспользуемся свойством таблиц: несмотря на указание �?ирины ячейкам, эти ячейки будут растянуты по �?ирине содержимого, если только таблице на задано свойство table-layout:fixed.

Вот мы и получили, что требовалось. Уберем границы у ячеек, которые были добавлены для наглядности, и можно использовать. Но, конечно, надо подумать, как избавиться от таблицы при верстке подобной задачи.

Метки: верстка, азы верстки

Запись создана: Четверг, 27 Январь 2011 в 0:00 и находится в рубриках CSS. Вы можете следить за комментариями к этой записи через ленту RSS 2.0. Комментарии и уведомления в настоящее время закрыты.