Простая техника позиционирования изображения при обтекании текстом
Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т.е. должно это выглядеть вот так: Алеаединица, в первом приближении, текстологически интегрирует микрохроматический интервал, при этом нельзя говорить, что это явления ...
Комментарии (44)
img {float: left;}
p{margin-left:135px;}
И незачем огород городить.
О то что и искал, спасибо огромнейшее!
40a, да, действительно. Спасибо за вариант.
интересный вариант, я обычно задаю hspasce и vspace чтобы текст не прилипал к рисунку
Александр, в соответствии с xhtml-стандартом нельзя использовать параметры hspasce и vspace.
cssing.org.ua/2005/07/03/display-table/ — это просто
а в статье — усложнено и семантически неправильно.
Seigiard, прежде чем давать эту ссылку, нужно было внимательно прочитать мою статью.
Почитал, ну что можно сказать достойно внимания, только прошу обратить внимание и на мою реализации данной задачи:
И обрабатываем все вот этим клочком CSS:
в итоге задачу решаем полностью, а кода на 2 строки меньше, да и по элегантней смотриться, всего…
Shur, спасибо. Тоже хороший вариант.
Также отправил этот вариант его создателю, получил одобрение и признание того, что мой вариант более гибок и дает больше возможностей.
Так что можете смело использовать.
Да и с браузерами будет меньше проблем, особенно если потребуется для этого изображения создать рамку, отступы (padding)и т. д.
Кстати, а чем не подходит такое решение:
В html-виде редактора записи картинку прописываем следущим образом (т.е. добавляем параметры margin-left: N px; margin-right: N px;):
Где N — нужное число (я указываю 10px и 15px для margin-left и margin-right соответсвенно).
Sonikelf, что-то я не понял вашего решения.
Черт, написал длинный коммент, но его захавало спамфильтром.
Впрочем, наверное то, что я описал не совсем по теме, ибо Вы говорили про верстку, а я про картинки и текст в записях. Впрочем, вполне вероятно, что в верстке это тоже бы сработало.
Вообщем, если спамфильтр не захавал насмерть коммент, а сложил куда-то — гляньте, может я о том и пригодится, а может нет :)
Видимо все-таки спам-фильт захавал коммент насмерть =) Все ваши комменты здесь. В спаме ничего нет.
Жалко. Писал долго и много :)
Потом может перепишу. Как-нибудь.
Спасибо. Давно хотел так сделать, но все руки не доходили найти описание.
А не проще ли вот так:
Александр, прочитайте внимательно статью, прежде чем писать это.
Вот еще похожее решение нашел :)
Статья: ghettocooler.net/2005/11/13/
Пример: ghettocooler.net/img/floats-no-wrap/
Давненько было написано :)