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

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

    Опрос

    Windows Mobile
    Symbian
    Android
    iPhone
    Linux
    другая
    не знаю
    у меня обычный телефон



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

    Архив новостей
    Март 2022 (1)
    Декабрь 2021 (1)
    Август 2021 (1)
    Июль 2021 (3)
    Февраль 2021 (3)
    Январь 2021 (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, Home Assistant, HomeAssistant, Linux, log, Monster, ogf3, RDP, Template, VBS, windows, WSH, бумага, бумажный самолетик, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, уведомления, фигуры, шаблон, Яндекс, яндекс-карты

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