Оглавление

Обтекание текстом изображения

Изображение можно окружить текстом средствами HTML, а именно с помощью атрибута align. В настоящее время использовать его не рекомендуется, однако CSS предлагает полноценную замену этому атрибуту!

 

Решение
Для реализации обтекания текстом изображения слева или справа используется CSS-свойство float, как показано на рис. 9.5.
Код страницы будет таким:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Float</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <style type="text/css">
      .xoopsimg {
        float: left;
        width: 155px;
      }
    </style>
  </head>
  <body>
    <h1>Что такое XOOPS?</h1>
    <img src="img/xoops-cover.jpg" alt="xoops" class="xoopsimg" />
	<p><strong>XOOPS</strong> - это динамический OO  (Объектно-Ориентированный) 
	основанный на открытом исходном коде скрипт  портала, написанный на PHP. 
	XOOPS поддерживает различные базы данных,  XOOPS - это идеальный инструмент 
	для создания небольших  высоко-динамичных сообществ вэб-сайтов, внутренних 
	порталов компании,  корпоративных порталов, web-публикаторов и многого другого.</p> 
	<h3>Технические требования:</h3> 
	<ul>
          <li> WWW сервер (<a href="http://www.apache.org/">Apache</a>, IIS, Roxen, etc)</li>
          <li> <a href="http://www.php.net/">PHP</a> 5.2 или выше</li>
          <li> <a href="http://www.mysql.com/">База данных MySQL</a> 5.0 (или выше)</li>
	</ul> 
	<p style="text-align: right;"><a href="#">скачать XOOPS</a></p>
  </body>
</html>

 

Обтекание изображения текстом с помощью свойства float

Рис. 9.5. Обтекание изображения текстом с помощью свойства float

 
Обсуждение
Свойство float(1) удаляет элемент из обычного потока и размещает его у правого или левого края родительского блока. Остальные блочные элементы будут вести себя так, как будто указанного элемента вообще не существует. Однако строковые элементы, такие как контент, будут смещаться, освобождая для него пространство, и потому использование свойства float создает эффект обтекания изображения текстом.

 

Как видно на рис. 9.5, текст расположен вплотную к границе изображения. При добавлении к изображению рамки он будет соприкасаться с ней.

 

Для добавления пустого пространства между текстом и изображением необходимо задать для изображения внешний отступ. Поскольку оно смещено к левой границе родительского элемента, достаточно будет добавить отступ справа и снизу, чтобы слегка отодвинуть текст от него:

 

.xoopsimg {
   float: left;
   width: 155px;
   border: 2px solid #000000;
   margin-right: 20px;
   margin-bottom: 6px;
}

 
На рис. 9.6 показан результат обработки данного кода: теперь между изображением и текстом появился просвет.

 

После добавления дополнительных отступов справа и снизу документ выглядит привлекательнее

.Рис. 9.6. После добавления дополнительных отступов справа и снизу документ выглядит привлекательнее

Примечания:
  • Блоки, для которых задано свойство float, называют «плавающими», а сам эффект – «обтеканием»
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити