Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика

Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук


Вітаю Вас, Гість · RSS 20.08.2017, 00:19
На головну » Підручники » Підручник CSS » Урок 13: Спливаючі елементи (поплавці) - Підручник CSS
Урок 13: Спливаючі елементи (поплавці)

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



Якщо ми, наприклад, хочемо, щоб текст оточував малюнок, то результат повинен бути таким:

Як це зробити?

HTML-код для цього прикладу:

<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>

<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>

Щоб малюнок спливав вліво, а текст оточував його, ви повинні визначити ширину боксу, навколишнього малюнок, і встановити у властивості float значення left:

#picture {
float:left;
width: 100px;

}

Показати приклад

Ще приклад: колонки

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

<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>

<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>

<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</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="bill.jpg" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>

Щоб не дати тексту спливати вгору перед малюнком, ми можемо додати такий код CSS:

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

.floatstop {
clear:both;
}

Показати приклад

Резюме

Поплавки можна використовувати в різних ситуаціях, часто - одночасно з позиціонуванням. У наступному уроці ми розберемо, як позиціонувати бокс, відносно або абсолютно.
<< Урок 12: Боксова модель - висота і ширина
Всього коментарів: 2
2  
Так, здається, я зумів вирішити свою проблему. Необхідно вставити в поле picture властивість дісплей: блок, і все запрацює.

1  
Доброго дня! Я намагався скористатися розміщеним на сайті кодом для створення спливаючого вліво малюнка, оточеного текстом, однак з якоїсь причини текст не обтікав малюнок, а знаходився знизу. Тоді я спробував запустити у себе той код, який ви давали у прикладі, однак текст знову був знизу малюнка. Якщо ваша ласка, поясніть, де я помиляюся. На додаток наводжу текст коду. На жаль,я не знаю, як додати сюди скріншот, але, якщо поясните, як це зробити, додам і його. Наперед дякую усім, хто відгукнеться на прохання
Код
#picture {
  float:left;
  width: 160px;
}

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]