Вторник, 19.09.2017, 14:37
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 2
Гостей: 2
Пользователей: 0

Урок 13: Всплывающие элементы



  Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может всплывать вправо или влево в окне документа (или содержащего бокса) (см. в Уроке 9 описание боксовой модели). Принципы показаны на рисунке:


всплывающие элементы
 

Если мы, например, хотим, чтобы текст окружал рисунок, то результат должен быть таким:


float



Как это сделать?

HTML-код для этого примера:

<div id="picture">
<img
src="/butterfly.jpg" alt="
butterfly">
</div>


<p>Praesent auctor erat at lorem convallis sit amet rhoncus orci convallis.
In hac habitasse platea dictumst... </p>





Чтобы рисунок всплывал влево, а текст окружал его, вы должны определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left:

#picture{
float:left;
width: 300px;
}




ширина бокса

Ещё пример: колонки

Поплавки /Floats можно использовать для вывода колонок в документе. Для этого вы должны просто определить необходимые колонки в HTML-коде тэгами <div> таким образом:

<div id="column1">
<p>
Praesent auctor erat at lorem convallis sit...</p>
</div>

<div
id="column2">
<p>
Morbi consequat egestas quam tincidunt porttitor...</p>
</div>

<div
id="column3">
<p>
Donec quis arcu id nulla ullamcorper laoreet ut ut dui...</p>
</div>




Теперь необходимую ширину колонок установим, например, 33%, а затем установим всплывание каждой влево в свойстве  float:

#column1{
float:left;
width: 33%;
}


#column2{
float:left;
width: 33%;
}


#column3{
float:left;
width: 33%;
}




колонки


float может иметь значения left, right или none.



Свойство clear

Свойство clear управляет поведением последовательностью всплывающих элементов документа.

По умолчанию последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс всплывает в сторону. Посмотрите на предыдущий пример, где текст автоматически смещается вверх вдоль изображения бабочки.

Свойство clear может иметь значения left, right, both или none. Принцип таков, что если clear, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.

<div id="picture">
<img
src="/butterfly.jpg" alt="butterfly">
</div>

<h1>
Butterfly</h1>

<p
class="floatstop">Praesent auctor erat at lorem convallis sit amet rhoncus orci convallis.
In hac habitasse platea dictumst...</p>




Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:

#picture{
float:left;
width: 350px;
}


.floatstop{
clear:both;
}




свойство clear


Поиск
Календарь
«  Сентябрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет