русс | укр

Программирование:

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог1С

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании

Обучение

Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Обтекание элемента

Дата добавления: 2015-07-09; просмотров: 580; Нарушение авторских прав

Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.

Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.

Значения свойства float:

· left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа.

· right - Выравнивает элемент по правому краю, остальные элементы обтекают его слева.

· none - Выравнивание элемента не задается. (по умолчанию)

Небольшой пример: заставим текст обтекать фотографию по правому краю при этом сам блок с фотографией "всплывёт" с левой стороны.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>float</title>
</head>
<body>
<div style="border: solid 1px black; width: 220px">
<div style="float: left;">
<img src="graphics/fon.jpg">
</div>
Текст в этом блоке обтекает рисунок помещённый в контейнер div с правой стороны, так как сам блок с рисунком, с помощью свойства float с значением left, "всплывает" слева.
</div>
</body>
</html>

А вот в примере ниже показано как могут располагаться элементы относительно друг друга, если свойство float присвоено нескольким элементам

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>float</title>
</head>
<body>
<div style="float: right; background: #c5ffa0; border: solid 1px black; padding: 10px; width: 420px">
<span style="float: left; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px">блок выровнен по левому краю</span>
<span style="float: right; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px">блок выровнен по правому краю</span>
содержание блока div обтекает выровненные элементы span слева и справа
</div>
</body>
</html>




<== предыдущая лекция | следующая лекция ==>
Видимая часть элемента. | Блочная вёрстка.

Карта сайта Карта сайта укр

Видео
Уроки php mysql Программирование
Онлайн сервисы
Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские
Полезное

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных

 


Не нашли то, что искали? Google вам в помощь!

  
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.
Генерация страницы за: 4.346 сек.