Елемент може "спливати" вправо або вліво за допомогою властивості float. Тобто бокс з його змістом може спливати вправо або вліво у вікні документа (або містить боксу) (див. у Уроці 9 опис боксової моделі). Принципи показані на малюнку:
Якщо ми, наприклад, хочемо, щоб текст оточував малюнок, то результат повинен бути таким:
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Щоб малюнок спливав вліво, а текст оточував його, ви повинні визначити ширину боксу, навколишнього малюнок, і встановити у властивості float значення left:
Поплавки / 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:
Властивість clear керує поведінкою послідовністю спливаючих елементів документа.
За замовчуванням послідовні елементи зміщуються вгору, заповнюючи доступне простір, який звільняється, якщо бокс спливає в сторону. Подивіться на попередній приклад, де текст автоматично зміщується вгору вздовж зображення Біла Гейтса.
Властивість clear може мати значення left, right, both або none. Принцип такий, що якщо clear, наприклад, має для боксу значення both, то верхній край рамки цього боксу завжди буде знаходитися під нижнім краєм поля можливих спливаючих зверху боксів.
Поплавки можна використовувати в різних ситуаціях, часто - одночасно з позиціонуванням. У наступному уроці ми розберемо, як позиціонувати бокс, відносно або абсолютно.
Доброго дня! Я намагався скористатися розміщеним на сайті кодом для створення спливаючого вліво малюнка, оточеного текстом, однак з якоїсь причини текст не обтікав малюнок, а знаходився знизу. Тоді я спробував запустити у себе той код, який ви давали у прикладі, однак текст знову був знизу малюнка. Якщо ваша ласка, поясніть, де я помиляюся. На додаток наводжу текст коду. На жаль,я не знаю, як додати сюди скріншот, але, якщо поясните, як це зробити, додам і його. Наперед дякую усім, хто відгукнеться на прохання
Код
#picture { float:left; width: 160px; }
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
Меню сайту
