Блог о создании, поисковой оптимизации и продвижении сайтов, хостинг, домены, аналитика

+7 (495) 542-05-85

Блочная верстка div

Замучался постоянно искать мелкие нюансы блочной Div верстки, решил их все отобразить в своем блоге.

Как можно использовать блочную верстку:
Блоку  DIV можно, даже можно сказать нужно применять таблицу стилей, а именно
Высота блока: width:100px;
Ширина блока: height:100px;
Выравнивание блока по левому краю: float:left;
Выравнивание блока по правому краю: float:right;
Расположение по умолчанию: float:none;
Блок опускается ниже предыдущего элемента, который выравнивается по левому краю: clear:left;
Блок опускается ниже предыдущего элемента, который выравнивается по правому краю: clear:right;
Блок опускается ниже любого предыдущего выравненного элемента: clear:both;
Нет ограничений, на положение блока относительно выравненных элементов: clear:none;

Пример использования ниже:
<div style="background:red; width:150px; float:left;">1</div>
<div style="background:blue; width:100px; float:left; ">2<br>материал<br>материал</div>
<div style="background:gray; width:130px; float:left;">3<br>материал</div>
<div style="background:green;">4<br>материал<br>материал<br>материал</div>

1
материал
2
материал
материал
3
материал
4
материал
материал
материал
Опубликовано в рубрике: Создание сайтов
Метки: , , , , ,
Автор: admin.


Добавьте ссылку на запись себе в социальные закладки:
Google Bookmarks Digg Reddit del.icio.us Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong


Блочная верстка div: 3 комментария

    • :). На самом деле, каждый уважающий себя специалист, должен уметь многое, но заниматься своим делом :).