Главная›CSS-верстка

Простая техника позиционирования изображения при обтекании текстом

44 комментария

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

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

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

Такое позиционирование текста достигается, благодаря помещению его в дополнительный <div>, которому указывается свойство display: table. Если бы был всего один параграф с текстом, то дополнительный <div> не понадобился бы, достаточно было бы применить display: table к блоку параграфа. Однако, если на практике используется несколько параграфов, то их приходится помещать в отдельный контейнер, иначе второй и последующие параграфы съедут под изображение.

В случае, если изображение всегда будет иметь статическую ширину (например, данная техника подойдет при использовании аватаров в комментариях на блоге), то существует способ, который позволяет отказаться от необходимости использования дополнительного контейнера для текста и тем самым сделать разметку более простой.

Описанное ниже решение применимо в двух следующих случаях:

  1. Если используется более одного абзаца с текстом.
  2. Если изображение имеет постоянную ширину.

Пусть, к примеру, у нас будет следующий html-код:

<ul>
	<li>
		<img src="image.jpg" alt="" />
		<p>Параграф с текстом</p>
		<p>Еще один параграф с текстом</p>
	</li>
</ul>

Приступим к стилям.

Шаг 1-й

Для начала создадим слева от текста отступ, в который уместится изображение, и добавим к последнему обтекание текстом:

ul li {padding-left: 147px}
ul li img {float: left}

Получаем вот такую картину:

Шаг 1-й

Шаг 2-й

Следующим стилем мы позиционируем изображение:

ul li img {
	float: left;
	position: relative;
	left: -135px;
}

Пример обретает следующий вид:

Шаг 2-й

Шаг 3-й

Теперь остается ликвидировать разрыв между изображением и текстом путем добавления отрицательного отступа справа от изображения:

ul li img {
	float: left;
	position: relative;
	left: -135px;
	margin-right: -135px;
}

И вот результат:

Шаг 3-й

Как альтернатива, изображение можно позиционировать абсолютно.

Источник описанной техники

Смотрите также

5 советов верстальщику

32 комментария

Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что “пинок” получил от трех человек. 1) Читайте блоги специалистов в данной ...

Переходим с TABLE'ичной верстки на DIV'овую

87 комментариев

Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом ...

Верстка красивых тегов для сайта + бонус

25 комментариев

Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...

Зеленый свет CSS-свойствам при верстке под IE8 и выше

26 комментариев

Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...

Комментарии (44)

  1. Dimox
    29 сентября 2008 г. в 16:07

    Александр, в соответствии с xhtml-стандартом нельзя использовать параметры hspasce и vspace.

  2. Seigiard
    3 октября 2008 г. в 03:53

    http://cssing.org.ua/2005/07/03/display-table/ — это просто

    а в статье — усложнено и семантически неправильно.

  3. Dimox
    3 октября 2008 г. в 10:06

    Seigiard, прежде чем давать эту ссылку, нужно было внимательно прочитать мою статью.

  4. Shur
    4 октября 2008 г. в 18:36

    Почитал, ну что можно сказать достойно внимания, только прошу обратить внимание и на мою реализации данной задачи:

    <ul>
    <li>
        <img src="image.jpg" alt="" />
        <h2>Заголовок текста</h2>
        <p>Параграф с текстом</p>
  </li>
</ul>

    И обрабатываем все вот этим клочком CSS:

    ul li {
    padding-left: 147px;
}
ul li img {
    float: left;
    margin-left: -135px;
}

    в итоге задачу решаем полностью, а кода на 2 строки меньше, да и по элегантней смотриться, всего…

  5. Dimox
    5 октября 2008 г. в 12:24

    Shur, спасибо. Тоже хороший вариант.

  6. Shur
    6 октября 2008 г. в 09:56

    Также отправил этот вариант его создателю, получил одобрение и признание того, что мой вариант более гибок и дает больше возможностей.
    Так что можете смело использовать.

  7. Shur
    6 октября 2008 г. в 10:00

    Да и с браузерами будет меньше проблем, особенно если потребуется для этого изображения создать рамку, отступы (padding) и т.д.

  8. Sonikelf
    9 октября 2008 г. в 15:45

    Кстати, а чем не подходит такое решение:

    В html-виде редактора записи картинку прописываем следущим образом(т.е. добавляем параметры margin-left: N px; margin-right: N px;):

    Где N – нужное число (я указываю 10px и 15px для margin-left и margin-right соответсвенно).

  9. Dimox
    9 октября 2008 г. в 18:40

    Sonikelf, что-то я не понял вашего решения.

  10. Sonikelf
    9 октября 2008 г. в 19:31

    Черт, написал длинный коммент, но его захавало спамфильтром.
    Впрочем, наверное то, что я описал не совсем по теме, ибо Вы говорили про верстку, а я про картинки и текст в записях. Впрочем, вполне вероятно, что в верстке это тоже бы сработало.
    Вообщем, если спамфильтр не захавал насмерть коммент, а сложил куда-то – гляньте, может я о том и пригодится, а может нет :)

  11. Dimox
    9 октября 2008 г. в 20:09

    Видимо все-таки спам-фильт захавал коммент насмерть =) Все ваши комменты здесь. В спаме ничего нет.

  12. Sonikelf
    9 октября 2008 г. в 20:12

    Жалко. Писал долго и много :)
    Потом может перепишу.. Как-нибудь.

  13. Артемий
    12 октября 2008 г. в 19:57

    Спасибо. Давно хотел так сделать но все руки не доходили найти описание.

  14. Александр
    19 октября 2008 г. в 02:46

    А не проще ли вот так:

    
<div class="txt">
<img src="img/img_01.jpg">
Lorem ipsu dolor. Set lorem. Entertainment . Lorem ipsum . read more . Domercoect . read more . Tuei sec viv. read more .
</div>

css

.txt  img { padding-right:10px; padding-bottom:10px; float:left; }
  15. Dimox
    19 октября 2008 г. в 14:18

    Александр, прочитайте внимательно статью, прежде чем писать это.

  16. gordi
    19 октября 2008 г. в 15:17

    Вот еще похожее решение нашел :)
    Статья: http://ghettocooler.net/2005/11/13/
    Пример: http://ghettocooler.net/img/floats-no-wrap/
    Давненько было написано :)

  17. akaGamlet
    3 марта 2009 г. в 15:32

    img
    {
    float: left;
    position: relative;
    margin-left: – /* маргин на который сдвинули*/
    }
    и все

  18. Romka
    5 февраля 2010 г. в 11:21

    хм… ребят а вот я все время весь контент пихаю в div’ы привык из-за пользования визуальным редактром )) и вот у меня наоборот по вашему методу получается: пихать текст в отдельный див) так что пошел дальше искать )

  19. Romka
    5 февраля 2010 г. в 11:27

    :D нашел про див) мб ко му то пригодится: прямо в нужный див в параметры добавляем все замечательно! ) написано еще после того как обтекание закончилос дописать: только и без этого все прекрасно )

  20. Владимир
    15 марта 2012 г. в 21:50

    А можете подсказать как установить картинку в нужном мне месте дива? Страница у меня генерируется автоматически, поэтому влезть в тег img не могу

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.