12792

Всплывающие элементы (поплавки)

Практическая работа

Информатика, кибернетика и программирование

Всплывающие элементы поплавки Элемент может всплывать вправо или влево с помощью свойства float. То есть бокс с его содержимым может всплывать вправо или влево в окне документа или содержащего бокса см. в лабораторной №7 описание боксовой модели. Принципы показаны на ...

Русский

2013-05-03

39.32 KB

1 чел.

Всплывающие элементы (поплавки)

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

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

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

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;

}

Задание: рассмотренный выше пример сделайте самостоятельно.

Резюме

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


 

А также другие работы, которые могут Вас заинтересовать

8819. История. Назначение. Системные вызовы. Структура операционных систем. 153 KB
  История. Назначение. Системные вызовы. Структура операционных систем. 1.1 История ОС Первые (1945-1955г.г.) компьютеры работали без операционных систем, как правило, на них работала одна программа. Когда скорость выполнения программ и их количество ...
8820. Процессы и потоки (нити) 130 KB
  Процессы и потоки (нити). 2.1 Процессы 2.1.1 Понятие процесса Процесс (задача) - программа, находящаяся в режиме выполнения. С каждым процессом связывается его адресное пространство, из которого он может читать и в которое он может писать данн...
8821. Взаимодействие между процессами 164.5 KB
  Взаимодействие между процессами. 3.1 Взаимодействие между процессами Ситуации, когда приходится процессам взаимодействовать: Передача информации от одного процесса другому Контроль над деятельностью процессов (например: когда они борются...
8822. Планирование процессов в информатике 144 KB
  Планирование процессов. Основные понятия планирования процессов Планирование - обеспечение поочередного доступа процессов к одному процессору. Планировщик - отвечающая за это часть операционной системы. Алгоритм планирования - используемый алгори...
8823. Взаимоблокировка процессов 181.5 KB
  Взаимоблокировка процессов Взаимоблокировка процессов  может происходить, когда несколько процессов борются за один ресурс. Ресурсы бывают выгружаемые и невыгружаемые, аппаратные и программные. Выгружаемый ресурс - это...
8824. Управление памятью. Страничная организация 128.5 KB
  Управление памятью. Страничная организация 6.1 Основные понятия Менеджер памяти - часть операционной системы, отвечающая за управление памятью. Основные методы распределения памяти: Без использования внешней памяти С использованием внешн...
8825. Алгоритмы замещения страниц 116 KB
  Алгоритмы замещения страниц 7.1 Алгоритмы замещения страниц Идеальный алгоритм заключается в том, что бы выгружать ту страницу, которая будет запрошена позже всех. Но этот алгоритм не осуществим, т.к. нельзя знать какую страницу, когда запросят. Мож...
8826. Сегментация памяти 138.5 KB
  Сегментация памяти 8.1 Основные понятия сегментации Рассмотрим пример, когда программа использует одно адресное пространство.   программа использует одно адресное пространство Недостатки такой системы: Один участок может полностью заполниться, но пр...