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;

}

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

Резюме

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


 

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

11770. Розв’язання транспортних задач лінійного програмування 87.87 KB
  Звіт до лабораторної роботи № 7 Розв’язання транспортних задач лінійного програмування. з курсу Математичні методи дослідження операцій Мета роботи: Вивчити особливості розв’язування транспортних задач за допомогою Solver. 1.1 Теоретичні відомості. П
11771. Розв’язання та аналіз задач булевого програмування за допомогою Excel 86.2 KB
  Звіт до лабораторної роботи № 9 Розв’язання та аналіз задач булевого програмування за допомогою Excel з курсу Математичні методи дослідження операцій Мета роботи: Вивчити метод розв’язання задач булевого програмування в Solver. Теоретичні відомості. Рішен...
11772. Розв’язання цілочисельних задач ЛП за допомогою Excel. Графічне представлення та порівняння розв’язків цілочисельної та неперервної задачі 76.8 KB
  Звіт до лабораторної роботи № 8 Розв’язання цілочисельних задач ЛП за допомогою Excel. Графічне представлення та порівняння розв’язків цілочисельної та неперервної задачі з курсу Математичні методи дослідження операцій Мета роботи: Вивчити особливості предст...
11773. Решение задачи целочисленного ЛП с помощью динамического программирования 481.5 KB
  Курсовая работа по дисциплине МАТЕМАТИЧЕСКИЕ МЕТОДЫ ИССЛЕДОВАНИЯ ОПЕРАЦИЙ на тему Решение задачи целочисленного ЛП с помощью динамического программирования АННОТАЦИЯ Курсовая работа содержит 40 страниц 8 формул 17 таблиц 10 литературных источников. В ...
11774. Розв’язання несумісних задач лінійної оптимізації в діалоговому режимі 199.06 KB
  Звіт до лабораторної роботи №4 на тему: Розв’язання несумісних задач лінійної оптимізації в діалоговому режимі З курсу: Математичні методи дослідження операцій Мета: Знайти оптимальний розв’язок розподілу ресурсів за умови первинної наявності несумісн
11775. Предмет та задачі дослідження операцій 165 KB
  Предмет та задачі дослідження операцій Предмет та історія виникнення дослідження операцій ДО. Основні поняття ДО та етапи операційного дослідження Пряма та обернена задачі ДО. Детерміновані задачі ДО. Проблема вибору розв’язків в умовах невизначеності. ...
11776. Пошук оптимального розв’язку багатокритерійних лінійних задач 153.21 KB
  Звіт до лабораторної роботи №5 на тему: Пошук оптимального розв’язку багатокритерійних лінійних задач З курсу: Математичні методи дослідження операцій Мета: Вивчити методологію розв’язання багатокритерійних оптимізаційних задач на прикладі задачі розпо...
11777. Аналіз оптимізаційних задач. Аналіз оптимального розв’язку. Параметричний аналіз. Графічне представлення 139.27 KB
  З в і т про виконання лабораторної роботи 3 на тему: Аналіз оптимізаційних задач. Аналіз оптимального розв’язку. Параметричний аналіз. Графічне представлення. З курсу: Математичні методи дослідження операцій Мета: Вивчити методи аналізу задач лінійного пр
11778. Основні етапи розв’язання задач на дослідження операцій 77.35 KB
  Звіт до лабораторної роботи №1 з дисципліни Математичні методи дослідження операцій ЛАБОРАТОРНА РОБОТА №1 Тема роботи: Основні етапи розв’язання задач на дослідження операцій. Питання: Поняття про задачі дослідження операцій. Поняття моделі класифік...