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

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


13 октября 2009. Разместил: dimon
Рассмотрим как прямоугольные блоки, заданые с помощью 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


Куда он попал не понятно belay

Для того, чтобы прогнозировать расположение этого блока есть свойство 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

Вернуться назад