Равноудаленные элементы в CSS

Категория: Интернет | Автор: cava150 | Опубликовано: 12.05.2010

Добрый день! Сегодня хотел бы поговорить о реализации равноудаленных элементов с помощью css. Часто на блогах вижу горизонтальную полоску, в которой размещаются равноудалено блоки. Обычно – анонсы на предыдущим статьи или маленькая реклама. Для начала давайте разместим равноудалено 4 картинки. Для начала создадим блок, в который поместим 4 картинки, я размещу одинаковые картинки.

!> В данном случае мы создали контейнер, и пропишем css стили для данного блока #main{ text-align:justify} #main span{ display:inline-block; width:100%; } С изображениями получилось) Давайте разберемся в коде. “Зачем, тут span”- спросите Вы. Мой ответ – “Получается span “ложится” под картинками и благодаря этому картинки не разваливаются”. Теперь давайте разберемся, как можно сделать 4 равноудаленных блока. Как всегда, для начала создадим контейнер, в который вложим 4 блока.

Блок 1

Блок 2

Блок 3

Блок 4

!> Думаю, тут сложного ничего нету. Теперь пропишем css свойства #container { text-align: justify; text-justify:newspaper; width:100% } #include{ display:-moz-inline-box; display:inline-block; vertical-align:top; text-align:left; width:100px; height:100px; background:black; } #text{display:-moz-inline-box; display:inline-block; width:100%; } Всё хорошо отображается, можно изменить количество блоков. В данной статье, я вам показал как сделать равноудаленные элементы, используя css стили. Надеюсь, статья была полезная. С уважением,cava!

http://www.cavablog.pp.ua/web-texnologii/ravnoudalennye-elementy-css/

Комментарии

К этой статье пока нет комментариев. Станьте первым! У нас гости не могут комментировать статьи. Пожалуйста авторизуйтесь или зарегистрируйтесь, чтобы прокомментировать.

Свежие комментарии

Ну, вот это я понимаю, настоящая инструкция для тех, кто хочет не просто «привет, как дела», а чтобы дамы сами в личку ломились! Как говорится, техник...

Читать >>

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

Полностью поддерживаю подход, описанный в статье! Рисование — не просто творческое занятие, а ключевой инструмент для развития ребёнка. Как детский пс...

Интересная подборка ошибок, но не могу не высказать скепсис по поводу части рекомендаций. Например, о зарядке только до 80% — это логично с техническо...

Работал соцработником пару лет, и вот что не написали: это не только помощь людям, но и куча бумажек, отчётов и согласований. Бывает, половина времени...