Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

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

Исходник

Я считаю это одно из самых часто применяемых свойств для изображения, это именно обтекание его текстом, лично в моей практике я сталкиваюсь с этим повсеместно, когда пишу статьи или просто размещаю какой либо контент, но у многих начинающих веб-мастеров возникает вопрос, а как это сделать? И именно об этом я и хотел бы рассказать в этом небольшом уроке.

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

Итак, первый способ это использование параметра align в теге img. С помощью этого параметра можно выравнивать рисунок, так как вам нужно по правому краю с помощью значения right или по левому, соответственно left. Давайте посмотрим на практике как это происходит.

Код:

<html>
<body>
<img src="proba.png" align="left">
Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет
взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет
взаимодействовать с картинкой, наглядно просто и понятно. Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.
</body>
</html>

И мы получим:

Так же здесь есть еще пара параметров, которые помогут в форматировании, а именно отступы от картинки. Горизонтальный отступ задается при помощи параметра hspace, он дает возможность задать отступ текста от картинки справа и слева в пикселях. Так же существует и вертикальные отступы, которые задаются параметрами vspace, все так же как и с предыдущим параметром.

<img src="proba.png" align="left" hspace="20" vspace="20">

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

Но этот метод более эффективен по сравнению с предыдущим, так как у таблиц больше параметров для управления отображением.

Код:

<html>
<body>
<table width="150px;" height="150px" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td><img src="proba.png" width="128px;" height="128px"></td>
</tr>
</table>
Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет
взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно </body>
</html>

Результат у нас получится как и в предыдущем случае, только здесь особенность уже в том, что мы можем регулировать положение таблицы тремя атрибутами, right, left, center и размеры задаем с помощью параметров width и height, тогда у нас отступ изображения от текста будет равен разнице размера таблицы и размера самого изображения. Так же здесь можно воспользоваться параметром cellspacing который задаст общий отступ от всех сторон изображения.

И последний третий способ, и я бы сказал самый эффективный и актуальный на данный момент, это использование стилей, а именно форматирование картинки при помощи параметра float. Посмотрим как данный метод реализуется в коде:

<html>
<body>
<img src="proba.png" width="128px;" height="128px" style="float: left; margin: 20px;">
Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно.Очень много непонятного текста просто для примера чтобы было наглядно видно как текст будет взаимодействовать с картинкой, наглядно просто и понятно </body>
</html>

И опять таки результат у нас будет тот же а лишних тегов меньше. Положение рисунка мы регулируем с помощью параметра float задавая ему значения left или right. А отступы от текста здесь можно регулировать достаточно гибко благодаря параметру margin, если мы задаем общее значение то отступы будут осуществляется от всех сторон картинки, как приведено выше, но можно задать отступ от каждой стороны отдельно для этого существуют параметры margin-top отступ от верхнего края, margin-right отступ от правой стороны, margin-bottom отступ от нижней стороны и margin-left соответственно отступ слева. Плюс ко всему вы можете сделать отдельный класс в таблице стилей и вынести все настройки туда, как собственно по уму и надо делать.

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

Дата публикации:2012-04-14


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget