Выравнивание текста относительно картинки

На этой страничке я хочу показать Вам как можно прерывать обтекание картинок текстом. Давайте вспомним о теге <br>, который осуществляет принудительный перевод текста на другую строку. У тега тэга <br> есть атрибут clear. Допустим, текст обтекает объект картинку.


Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.

К примеру возникла необходимость, что вам нужно, чтобы текст после слов "человек весьма примечательной наружности." обрывался, и следующее предложение "Он словно сошел с картинки" - уже начиналось под картинкой. Сама запись кода будет выглядеть так:

<br clear="left">


  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
<img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" border="0" alt="Просто картинка">
<font size="+1" face="Cosmic Sans, arial, verdana, courier"> Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
<br clear="left">
<b> Он словно сошел с картинки </b>
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником.
<i> Однако внимание привлекал не столько щегольской наряд пассажира, </i>
сколько импозантная, можно даже сказать, эффектная внешность.
<u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u>
ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>    посмотреть

У атрибута clear существует несколько значений: all, left, right.

  • all - завершить обтекание объекта текстом.
  • left - завершить обтекание текстом объекта, выровненного по левому краю.
  • right - завершить обтекание текстом объекта, выровненного по правому краю.

В своем примере я задал clear="left", так как картинка выровнена по левому краю.


Вернуться назад Перейти к следующей странице


2009 - 2012г. andron09_73@mail.ru
  купить дешевую левитру   Acer beTouch E110   фото детский шкаф