5.34. Установка свойства позиционирования float
Для управления положением элемента block по отношению к следующему за ним тексту документа можно воспользоваться свойством позиционирования float и clear.
По умолчанию содержимое элемента block занимает всю ширину окна браузера, предшествующий текст документа размещается выше, а наследующий текст документа — ниже содержимого элемента, подобно абзацу в обычном текстовом документе. Однако имеется возможность воспользоваться свойством float, чтобы отобразить содержимое элемента block рядом (т.е. слева или справа) от следующего за элементом текста.
В качестве значений свойства float можно устанавливать следующие три ключевых слова, представленные в таблице 5.14.
Таблица 5.14
Ключевые слова, используемые для свойства float
Ключевое слово для float |
Эффект |
left |
Отображает содержимое элемента слева от последующего текста документа |
right |
Отображает содержимое элемента справа от последующего текста документа |
none (по умолчанию) |
Отключает функцию обтекаемого размещения. Элемент при этом размещается как обычный элемент block. To есть, предшествующий текст документа - выше его, а последующий - ниже |
Ниже представлен XML-документ (листинг 1.10), полученный путём добавления поля примечания к XML-документу из листинга 1.8. К данному документу присоединён файл таблицы каскадных стилей, представленный в листинге 1.9.
/*Имя файла: Ruslud01.css*/
POEM
{font-size: 12pt}
POEM, TITLE, AUTHOR, NOTE, STANZA, VERSE
{display: block}
STANZA
{margin-left: 1 in; margin-bottom: .25in}
NOTE
{border-style: solid;
border-width: 1px;
text-align: center;
width: 1 in;
height: 1 in;
float: left}
Листинг 1.9
<?xml version=”1.0”?>
<?xml-stylesheet type=”text/css” href=”Ruslud01.css”?>
<POEM>
<TITLE>Руслан и Людмила</TITLE>
<AUTHOR>Пушкин Александр Сергеевич</AUTHOR>
<NOTE>Здесь находится поле примечания</NOTE>
<STANZA>
<VERSE>У лукоморья дуб зелёный;</VERSE>
<VERSE>Златая цепь на дубе том:</VERSE>
<VERSE>И днём и ночью кот учёный</VERSE>
<VERSE>Всё ходит по цепи кругом;</VERSE>
<VERSE>Идёт направо — песнь заводит,</VERSE>
<VERSE>Налево — сказку говорит,</VERSE>
</STANZA>
<STANZA>
<VERSE>Там чудеса: там леший бродит,</VERSE>
<VERSE>Русалка на ветвях сидит;</VERSE>
<VERSE>Там на неведомых дорожках</VERSE>
<VERSE>Следы невиданных зверей;</VERSE>
<VERSE>Избушка там на курьих ножках</VERSE>
<VERSE>Стоит без окон, без дверей;</VERSE>
</STANZA>
</POEM>
Листинг 1.10
На рисунке 33 представлен вид документа из листинга 1.10 в браузере.
Рисунок 33. XML-документ с полем примечания
Ниже представлен XML-документ (листинг 1.12), в котором вместо поля примечания вставлено изображение. К данному документу присоединён файл таблицы каскадных стилей, представленный в листинге 1.11.
/*Имя файла: Ruslud02.css*/
POEM
{font-size: 12pt}
POEM, TITLE, AUTHOR, IMAGE, STANZA, VERSE
{display: block}
STANZA
{margin-bottom: .25in}
IMAGE
{background-image: url(Romb.bmp)
background-repeat: no-repeat;
background-position: center;
width: 89 px;
height: 58 px;
float: left}
Листинг 1.11
<?xml version=”1.0”?>
<?xml-stylesheet type=”text/css” href=”Ruslud02.css”?>
<POEM>
<TITLE>Руслан и Людмила</TITLE>
<AUTHOR>Пушкин Александр Сергеевич</AUTHOR>
<IMAGE />
<STANZA>
<VERSE>У лукоморья дуб зелёный;</VERSE>
<VERSE>Златая цепь на дубе том:</VERSE>
<VERSE>И днём и ночью кот учёный</VERSE>
<VERSE>Всё ходит по цепи кругом;</VERSE>
<VERSE>Идёт направо — песнь заводит,</VERSE>
<VERSE>Налево — сказку говорит,</VERSE>
</STANZA>
<IMAGE />
<STANZA>
<VERSE>Там чудеса: там леший бродит,</VERSE>
<VERSE>Русалка на ветвях сидит;</VERSE>
<VERSE>Там на неведомых дорожках</VERSE>
<VERSE>Следы невиданных зверей;</VERSE>
<VERSE>Избушка там на курьих ножках</VERSE>
<VERSE>Стоит без окон, без дверей;</VERSE>
</STANZA>
</POEM>
Листинг 1.12
На рисунке 34 представлен вид документа из листинга 1.12 в браузере.
Рисунок 34. XML-документ со вставленным рисунком