Сделать стартовойДобавить в закладки  
Главная страничка Главная страничка
В номере:

Выходит с 17 июля 2008 г. цена договорная

Опрос

gismeteo.ru
Погода на Яндексе
pogoda.ru
meteonova.ru
по телевизору
за окном
в газете
а че его смотреть?
в другом месте
по счетчику гейгера



Календарь
«    Октябрь 2009    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031 

Архив новостей
Ноябрь 2020 (2)
Июль 2020 (2)
Июнь 2020 (3)
Май 2020 (1)
Март 2020 (1)
Сентябрь 2019 (1)

Информация
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


Куда он попал не понятно 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

 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Чтобы Вам были доступны все функции Вам необходимо либо зарегистрироваться, либо зайти на сайт под своим именем.

Другие новости по теме:

  • Простенький трёхколонный резиновый макет на div-ах
  • Как заставить min-height работать
  • DIV закругленные углы блока
  • Тег DIV - прямоугольный блок
  • DLE хаки: Добавление height и width к [img] и [thumb]


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

    #1 написал: serzhen77 (14 апреля 2010 01:07)
    спасибо!!!


     
    Информация
     
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


    Поиск по сайту:


    Облако тегов
    Android, Arduino, backup, CentOS, cmd, css, div, DLE, DLE хаки, domoticz, dzvents, event, Linux, log, LUA, Monster, ogf3, RDP, Template, VBS, w2k8, windows, WSH, бумага, бумажный самолетик, верстка, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, фигуры, шаблон, Яндекс, яндекс-карты

    Показать все теги
    Реклама
    раскрутка сайта бесплатно
    Главная страница | Регистрация | Добавить новость | Новое на сайте | Статистика | Поддержка | Правила ресурса Copyright © 2005-2018 by dimon - all right reserved!
    Тираж:           экземпляров.   Дизайн, верстка by dimon