Размещение элементов на странице

2015-12-15

539

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 13 14 15 16 17 18 19 202122 Следующая ⇒

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

Свойство float

Может иметь значения left, right или none.

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

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

Задание 11_6

Пример 11_6.htm:

<html>

<head>

<title>Пример11_6</title>

</head>

<body>

<h1>МГТУ — университет больших перспектив!</h1>

</div>

<p>

{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

<p>

{сюда вставить второй абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</body>

</html>

Чтобы рисунок всплывал влево, а текст окружал его, вы должны определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left:

Style11_6.css:

#picture {

float:left;

width:200px;

}

Заполнение элемента Поплавки/Floats можно использовать для вывода колонок в документе. Для этого вы должны просто определить необходимые колонки в HTML-коде тэгами <div> таким образом:

Задание 11_7

Пример11_7.htm:

<html>

<head>

<title>Пример11_7</title>

</head>

<body>

<h1>МГТУ — университет больших перспектив!</h1>

<p>{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</div>

<p>{сюда вставить второй абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</div>

<p>{сюда вставить третий абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</div>

</body>

</html>

Style11_7.css:

#column1 {

float:left;

width: 33%;

}

#column2 {

float:left;

width: 33%;

}

#column3 {

float:left;

width: 33%;

}

Свойство clear

Свойство clear управляет поведением последовательностью всплывающих элементов документа.

По умолчанию последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс всплывает в сторону. Посмотрите на предыдущий пример, где текст автоматически смещается вверх вдоль изображения МГТУ

Свойство clear может иметь значения left, right, both или none. Принцип таков, что если clear, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.

Задание 11_8

Пример11_8.htm:

<html>

<head>

<title>Пример11_8</title>

</head>

<body>

</div>

<h1>МГТУ — университет больших перспектив!</h1>

>{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</body>

</html>

Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:

Style11_8.css:

#picture {

float:left;

width: 100px;

}

.floatstop {

clear:both;

}

Посмотрите отображение файла с другими значениями свойства clear: left, right, both или none.

Позиционирование элементов

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками позиционирование даёт большие возможности для создания точного и интересного дизайна.

2015-12-15

539

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 13 14 15 16 17 18 19 202122 Следующая ⇒

Обсуждение в статье: Размещение элементов на странице

Обсуждений еще не было, будьте первым... ↓↓↓