DIV прямоугольные блоки - положение друг относительно друга

DIV прямоугольные блоки - положение друг относительно друга
Web » css
автор: dimon, опубликовано: 13 октября 2009
Рассмотрим как прямоугольные блоки, заданые с помощью DIV-ов, могут распологаться друг относительно друга на одной странице. <div style="background:White; border: solid 1px black;">Text1</div> <div style="background:Aliceblue; border: solid 1px black;">Text2<br>Text2<br>Text2</div> <div style="background:Cornsilk; border: solid 1px black;">Text3<br>Text3</div> А выглядеть это будет так: Text1 Text2 Text2 Text2 Text3 Text3 Ограничим длину блоков, добавив свойство width: <div style="background:White; border: solid 1px black; width: 50px;">Text1</div> <div style="background:Aliceblue; border: solid 1px black;width: 60px;">Text2<br>Text2<br>Text2</div> <div style="background:Cornsilk; border: solid 1px black; width: 70px;">Text3<br>Text3</div> Text1 Text2 Text2 Text2 Text3 Text3 Добавим свойтсво float: <div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div> <div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br>Text2<br>Text2</div> <div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br>Text3</div> Text1 Text2 Text2 Text2 Text3 Text3 Добавим еще один блок, не указав свойство float: <div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div> <div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br>Text2<br>Text2</div> <div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br>Text3</div> <div style="background:Orange; border: solid 1px black;">Text4<br>Text4<br>Text4<br>Text4</div> Text1 Text2 Text2 Text2 Text3 Text3 Text4 Text4 Text4 Text4 Куда он попал не понятно Для того, чтобы прогнозировать расположение этого блока есть свойство clear (left, right, both, none): <div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div> <div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br>Text2<br>Text2</div> <div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br>Text3</div> <div style="background:Orange; border: solid 1px black; clear: both;">Text4<br>Text4<br>Text4<br>Text4</div> Text1 Text2 Text2 Text2 Text3 Text3 Text4 Text4 Text4 Text4 Посмотрим как же сформировать стандартную страничку сайта: <div style="background:White; border: solid 1px black; width: 350px; text-align:center;">Шапка</div> <div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Меню<br>Линк11<br>Линк12<br>Линк13<br>Линк14<br>Линк15</div> <div style="background:Cornsilk; border: solid 1px black; width: 226px; float: left;">Контент<br><br>строка1<br> строка2<br> строка3<br> строка4<br> строка5<br> строка6<br> строка7<br> строка8<br> строка9<br> </div> <div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Меню<br>Линк11<br>Линк12<br>Линк13<br>Линк14<br>Линк15</div> <div style="background:Orange; border: solid 1px black; width: 350px; clear: both;">Copyright </div> Шапка Меню Линк11 Линк12 Линк13 Линк14 Линк15 Контент строка1 строка2 строка3 строка4 строка5 строка6 строка7 строка8 строка9 Меню Линк11 Линк12 Линк13 Линк14 Линк15 Copyright


Ключевые теги: css, div, верстка

68 1 2 3 4 5
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Чтобы Вам были доступны все функции Вам необходимо либо зарегистрироваться, либо зайти на сайт под своим именем. Другие новости по теме: Простенький трёхколонный резиновый макет на div-ах Как заставить min-height работать DIV закругленные углы блока Тег DIV - прямоугольный блок DLE хаки: Добавление height и width к [img] и [thumb]

Просмотрено: 5721 раз	\| Напечатать \| Комментарии (1)

Мы будем благодарны если Вы поделитесь ссылкой на эту новость со своими друзьями. BB-код (для вставки на форумы): HTML-код (для вставки в ЖЖ и сайты): Для отправки по почте:

Комментарии: