|
|
Ступенька 11. Обтекание картинки текстом
Как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. Как и у тэга
<p> - <p align="justify">.
Параметр
align есть у картинок:
<img src="img/img.gif" align="left">
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать
наоборот (картинка справа, текст слева) надо прописать
right:
<img src="img/img.gif" align="right">
Oтдельный разговор - выравнивание текста относительно графики (например, расположение подписи к картинке):
-
<img src="img.gif" align="bottom">
по положению нижней кромки изображения (это по умолчанию)
-
<img src="img.gif" align="middle">
посередине картинки
- <img src="img.gif" align="top"> вверху
картинки
А теперь о
параметре тэга Br - Clear. Зачем он нужен? Допустим текст обтекает
картинку.
 А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам. "Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
Допустим нам нужно, чтобы текст после слов "к моим гранитным ногам" обрывался, и "кушай, великий предок" - уже продолжалось под картинкой. Вы, конечно, можете ввести несколько тэгов br и решить эту проблему. Но если вдруг картинка (объект) будет большой, текста много, то тут вы уже явно не обойдетесь несколькими br, тут вам придется употребить их с десяток и больше. Так вот, чтобы не мучатся в таких ситуациях, и существует параметр clear:
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
Вот так это делается:
<img src="img/clearpri.gif" align="left">
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
<br clear="left">
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
У параметра clear существует несколько значений:
- All - завершить обтекание объекта текстом
-
Left - завершить обтекание текстом объекта, выровненного по левому краю
-
Right - завершить обтекание текстом объекта, выровненного по правому краю
В нашем примере мы задали clear="left", т.к. наша картинка выровнена по левому краю.
|
