Простая техника позиционирования изображения при обтекании текстом
Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т.е. должно это выглядеть вот так: Алеаединица, в первом приближении, текстологически интегрирует микрохроматический интервал, при этом нельзя говорить, что это явления ...
Комментарии (44)
Можно еще и так:
flack.ru/2008/08/26/semantic-coding-howto-6/
gordi, это работает только для одного абзаца. Я на это обратил внимание в статье.
По тому примеру вот так было бы красивее:
.announce p {
display: table;
height: 1%;
}
Почему?
Класс в нужный абзац прописал и все.
Хотя, честно скажу не пробовал, просто как вариант :)
А ты попробуй сначала, прежде чем писать «прописал и все» :0) Стиль уже итак действует на каждый абзац в блоке
.announce
, поэтому незачем еще и отдельный класс прописывать.Имел ввиду индивидуальный абзац, для него свой класс самое то :)
Если иначе, то и подход другой, что у тебя и продемострированно :)
Да, хорошая статья. Надо будет обязательно попробовать :)
Запомнил на будущее. Спасибо.
О! Ну наконец-то. Спасибо :)
А то надоел мне этот уползающий под картинку текст, который еще и предварительно прямо липнет к её краю.
Это всё конечно правильно, жаль только в Google Readere когда я RSS читаю все эти стили пропадают. И текст элегантным образом оказывается под картинкой. Даже в этом посте.
Sonikelf, пожалуйста. Рад, что пригодилось :)
Нагорский, в моем ридере (FeedDemon) эти стили тоже не срабатывают. Не знаю, почему, ведь они прописаны прямо в коде поста.
Ой спасибо большое, действительно текст ползущий под картинку раздражал очень сильно. Получилось правдf со второго раза.
Позиционировать абсолютно не стоит по очень простой причине: абсолютно позиционированный элемент с точки зрения основного потока не имеет высоты. Если высота картинки окажется больше, чем у абзаца (ев), она наползёт на следующую область. При стандартизованной высоте можно это нейтрализовать, приписав контейнеру (в данном случае li) height для ие6 и min-height для всех остальных, но это получается лишняя заморочка. Относительное позиционирование таких осложнений не создаёт.
Княгиня, да, абсолютно с вами согласен.
Как раз с этой проблемой и борюсь.
Все отлично, но в Maxthone описанный выше способ «едет». Смещение на пару пикселей влево почемуто.
alex_a, если я не ошибаюсь, Maxthone работает на движке IE6, а в IE6 я периодически наблюдаю излишний отступ в 3 пикселя у «плавающих» элементов (в данном случае — изображение).
А почему нельзя вместо списков не использовать div с нужным отступом слева? Я бы например так сделал:
И для стиля kullKlass прописал бы нужный отступ слева, и всего делов
PS: Я не знаю как тут сделать чтоб код в коментарии показывался, так что пока пусть так будет, надеюсь владелец этого блога меня исправит и просвятит
Дмитрий, суть не в «обертке» (можно использовать хоть списки, хоть дивы), а в технике позиционирования изображения.
Вообще-то специально для этого над формой комментирования существуют соответствующие подсказки. Нужно быть чуть внимательнее.
Как и в комментариях к оригинальной заметке, скажу что способ отличный. Но зачем создавать себе так много проблем, задавать и высчитывать столько чисел, привязывать стили к размерам картинки, если можно было решить все одной строкой display: table для абзаца?
Кто-нибудь знает? =)
А, ладно =) вопрос снят, не увидел пояснения. Но вот почему британец мне не ответил ума не приложу. =)
akella, я рад, что ты понял :0)
Я это заметил. Наверное он игнорирует нерусских =)