ИНТЕРНЕТ В РОССИИ И В МИРЕ

Сегодня Четверг 08.12.2016
HTML и CSS -> Тег div   Обновление - 09.08.2014

Тег div

<div>Блок текста или контейнер</div>

Всегда начинается с новой строки и после него добавляется перенос строки. Высота определяется содержимым div или значением высоты, установленной в стиле css. Если ширина div не указана, div занимает всю ширину страницы или контейнера. По умолчанию, div выравнивается по левому краю и один div распологается под другим.

Атрибут выравнивания - align, считается устаревшим в HTML 4.01 и не поддерживается в HTML5.

DIV по центру

ширина 70%

Два и более DIV по горизонтали

Для размещения двух и более div рядом по горизонтали есть 2 способа с использованием стилей CSS:
1. display:inline-block; - отменяет перенос DIV на новую строку (не поддерживается в IE до версии 8).
2. float:left; width:[значение]; (для левых блоков), margin-left:[значение]; (для правых блоков) - делает DIV "плавающими".

Если в общих для страницы стилях указан отступ для div (текст с красной строки) - text-indent:[значение], то при выравнивании DIV по горизонтали, надо указать нулевое значение этого свойства для каждого DIV: text-indent:0;

Применение свойства display:inline-block

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

Общие для всех DIV стили - {display:inline-block;text-indent:0;margin:0 1% 1% 0;padding:1%;border:1px solid gray;}

DIV 1 width:60%
DIV 2 width:30%


DIV 1 width:45%
DIV 2 width:20%
DIV 3 width:20%

Применение свойства float

Пример "резинового" макета веб-страницы из двух колонок (рамка добавлена для наглядности):

Левый DIV (левая колонка в макете веб-страницы)
Основные стили css: float:left; width:70%;
Правый DIV (правая колонка в макете веб-страницы)
Основные стили css: margin-left:75%;

Три блока DIV по горизонтали

Основной принцип, такой же, как и в предыдущем примере. Первый и второй DIV помещены в один контейнер - DIV.

Первый DIV
Второй DIV
Третий правый DIV

Лента из четырех блоков DIV по горизонтали

Лента состоит из двух пар плавающих DIV-ов. Каждая пара помещена в контейнер - DIV.
Первый DIV
Второй DIV
Третий DIV
Четвертый DIV


Поделиться:

Наверх
   
Яндекс цитирования
При любом использовании материалов сайта прямая ссылка на www.bizhit.ru обязательна. © 2010 - 2016 гг. Материал сайта, в том числе реклама, не является публичной офертой.
Обратная связь

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