Простая техника позиционирования изображения при обтекании текстом
Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т.е. должно это выглядеть вот так:
Алеаединица, в первом приближении, текстологически интегрирует микрохроматический интервал, при этом нельзя говорить, что это явления собственно фоники, звукописи.
Акцент интегрирует сонорный композиционный анализ, однако сами песни забываются очень быстро.
Такое позиционирование текста достигается, благодаря помещению его в дополнительный <div>, которому указывается свойство display: table. Если бы был всего один параграф с текстом, то дополнительный <div> не понадобился бы, достаточно было бы применить display: table к блоку параграфа. Однако, если на практике используется несколько параграфов, то их приходится помещать в отдельный контейнер, иначе второй и последующие параграфы съедут под изображение.
В случае, если изображение всегда будет иметь статическую ширину (например, данная техника подойдет при использовании аватаров в комментариях на блоге), то существует способ, который позволяет отказаться от необходимости использования дополнительного контейнера для текста и тем самым сделать разметку более простой.
Описанное ниже решение применимо в двух следующих случаях:
- Если используется более одного абзаца с текстом.
- Если изображение имеет постоянную ширину.
Пусть, к примеру, у нас будет следующий html-код:
1 2 3 4 5 6 7 | <ul> <li> <img src="image.jpg" alt="" /> <p>Параграф с текстом</p> <p>Еще один параграф с текстом</p> </li> </ul> |
Приступим к стилям.
Шаг 1-й
Для начала создадим слева от текста отступ, в который уместится изображение, и добавим к последнему обтекание текстом:
1 2 | ul li {padding-left: 147px} ul li img {float: left} |
Получаем вот такую картину:
Шаг 2-й
Следующим стилем мы позиционируем изображение:
1 2 3 4 5 | ul li img { float: left; position: relative; left: -135px; } |
Пример обретает следующий вид:
Шаг 3-й
Теперь остается ликвидировать разрыв между изображением и текстом путем добавления отрицательного отступа справа от изображения:
1 2 3 4 5 6 | ul li img { float: left; position: relative; left: -135px; margin-right: -135px; } |
И вот результат:
Как альтернатива, изображение можно позиционировать абсолютно.
- Офисная мебель: мебель для руководителя
Можно еще и так:
http://flack.ru/2008/08/26/semantic-coding-howto-6/
gordi, это работает только для одного абзаца. Я на это обратил внимание в статье.
По тому примеру вот так было бы красивее:
2
3
4
display: table;
height: 1%;
}
Почему?
Класс в нужный абзац прописал и все.
Хотя, честно скажу не пробовал, просто как вариант :)
А ты попробуй сначала, прежде чем писать “прописал и все” :0) Стиль уже итак действует на каждый абзац в блоке .announce, поэтому незачем еще и отдельный класс прописывать.
Имел ввиду индивидуальный абзац, для него свой класс самое то :)
Если иначе, то и подход другой, что у тебя и продемострированно :)
Вспомнил :)
Занимался переносом картинок в анонсе для портатора Lasto в начало параграфа.
Проблема была несколько иной.
Вот моя тема на форуме:
http://xpoint.ru/forums/thread/41974.xhtml#369891
Если посмотреть приведенный там мной html-код, то весьма похоже на то, что предлагаешь ты.
Опять же, как вариант.
Ну и скрипт кому-то может пригодиться.
У себя на блоге давал описание:
http://trifler.ru/blog/comment_1201435232.html
Запомнил на будущее. Спасибо.
О! Ну наконец-то.. Спасибо :)
А то надоел мне этот уползающий под картинку текст, который еще и предварительно прямо липнет к её краю..
Да, хорошая статья. Надо будет обязательно попробовать :)
Это всё конечно правильно, жаль только в Google Readere когда я RSS читаю все эти стили пропадают. И текст элегантным образом оказывается под картинкой. Даже в этом посте.
Sonikelf, пожалуйста. Рад, что пригодилось :)
Нагорский, в моем ридере (FeedDemon) эти стили тоже не срабатывают. Не знаю, почему, ведь они прописаны прямо в коде поста.
Ой спасибо большое, действительно текст ползущий под картинку раздражал очень сильно. Получилось правдf со второго раза.
Позиционировать абсолютно не стоит по очень простой причине: абсолютно позиционированный элемент с точки зрения основного потока не имеет высоты. Если высота картинки окажется больше, чем у абзаца(ев), она наползёт на следующую область. При стандартизованной высоте можно это нейтрализовать, приписав контейнеру (в данном случае li) height для ие6 и min-height для всех остальных, но это получается лишняя заморочка. Относительное позиционирование таких осложнений не создаёт.
Княгиня, да, абсолютно с вами согласен.
Как раз с этой проблемой и борюсь.
Все отлично, но в Maxthone описанный выше способ “едет”. Смещение на пару пикселей влево почемуто.
alex_a, если я не ошибаюсь, Maxthone работает на движке IE6, а в IE6 я периодически наблюдаю излишний отступ в 3 пикселя у “плавающих” элементов (в данном случае - изображение).
А почему нельзя вместо списков не использовать div с нужным отступом слева? Я бы например так сделал:
2
3
4
5
6
<img ... align="left">
<p>Текст текст</p>
<p>Текст текст</p>
...
</div>
И для стиля kullKlass прописал бы нужный отступ слева, и всего делов
PS: Я не знаю как тут сделать чтоб код в коментарии показывался, так что пока пусть так будет, надеюсь владелец этого блога меня исправит и просвятит
Дмитрий, суть не в “обертке” (можно использовать хоть списки, хоть дивы), а в технике позиционирования изображения.
Вообще-то специально для этого над формой комментирования существуют соответствующие подсказки. Нужно быть чуть внимательнее.
Как и в комментариях к оригинальной заметке, скажу что способ отличный. Но зачем создавать себе так много проблем, задавать и высчитывать столько чисел, привязывать стили к размерам картинки, если можно было решить все одной строкой display:table для абзаца?
Кто-нибудь знает? =)
А, ладно =) вопрос снят, не увидел пояснения. Но вот почему британец мне не ответил ума не приложу. =)
akella, я рад, что ты понял :0)
Я это заметил. Наверное он игнорирует нерусских =)
img {float: left;}
p{margin-left:135px;}
И незачем огород городить.
О то что и искал, спасибо огромнейшее!
40a, да, действительно. Спасибо за вариант.
интересный вариант, я обычно задаю hspasce и vspace чтобы текст не прилипал к рисунку
Александр, в соответствии с xhtml-стандартом нельзя использовать параметры hspasce и vspace.
http://cssing.org.ua/2005/07/03/display-table/ — это просто
а в статье — усложнено и семантически неправильно.
Seigiard, прежде чем давать эту ссылку, нужно было внимательно прочитать мою статью.
Почитал, ну что можно сказать достойно внимания, только прошу обратить внимание и на мою реализации данной задачи:
2
3
4
5
6
7
<li>
<img src="image.jpg" alt="" />
<h2>Заголовок текста</h2>
<p>Параграф с текстом</p>
</li>
</ul>
И обрабатываем все вот этим клочком CSS:
2
3
4
5
6
7
padding-left: 147px;
}
ul li img {
float: left;
margin-left: -135px;
}
в итоге задачу решаем полностью, а кода на 2 строки меньше, да и по элегантней смотриться, всего…
Shur, спасибо. Тоже хороший вариант.
Также отправил этот вариант его создателю, получил одобрение и признание того, что мой вариант более гибок и дает больше возможностей.
Так что можете смело использовать.
Да и с браузерами будет меньше проблем, особенно если потребуется для этого изображения создать рамку, отступы (padding) и т.д.
Кстати, а чем не подходит такое решение:
В html-виде редактора записи картинку прописываем следущим образом(т.е. добавляем параметры margin-left: N px; margin-right: N px;):
<img style=”margin-left: 10px; margin-right: 15px;” title=”Картинка” src=”http://site.ru/img.jpg” alt=”" width=”N” height=”N” align=”left” />
Где N - нужное число (я указываю 10px и 15px для margin-left и margin-right соответсвенно).
Sonikelf, что-то я не понял вашего решения.
Черт, написал длинный коммент, но его захавало спамфильтром.
Впрочем, наверное то, что я описал не совсем по теме, ибо Вы говорили про верстку, а я про картинки и текст в записях. Впрочем, вполне вероятно, что в верстке это тоже бы сработало.
Вообщем, если спамфильтр не захавал насмерть коммент, а сложил куда-то - гляньте, может я о том и пригодится, а может нет :)
Видимо все-таки спам-фильт захавал коммент насмерть =) Все ваши комменты здесь. В спаме ничего нет.
Жалко. Писал долго и много :)
Потом может перепишу.. Как-нибудь.
Спасибо. Давно хотел так сделать но все руки не доходили найти описание.
А не проще ли вот так:
2
3
4
5
6
7
8
<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; }
Александр, прочитайте внимательно статью, прежде чем писать это.
Вот еще похожее решение нашел :)
Статья: http://ghettocooler.net/2005/11/13/
Пример: http://ghettocooler.net/img/floats-no-wrap/
Давненько было написано :)
img
{
float: left;
position: relative;
margin-left: - /* маргин на который сдвинули*/
}
и все
хм… ребят а вот я все время весь контент пихаю в div’ы привык из-за пользования визуальным редактром )) и вот у меня наоборот по вашему методу получается: пихать текст в отдельный див) так что пошел дальше искать )
:D нашел про див) мб ко му то пригодится: прямо в нужный див в параметры добавляем все замечательно! ) написано еще после того как обтекание закончилос дописать: только и без этого все прекрасно )