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

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

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

Комментарии (45)
  1. 1

    Можно еще и так:
    http://flack.ru/2008/08/26/semantic-coding-howto-6/

  2. 2

    gordi, это работает только для одного абзаца. Я на это обратил внимание в статье.

    По тому примеру вот так было бы красивее:


    .announce p {
    display: table;
    height: 1%;
    }

  3. 3

    Почему?
    Класс в нужный абзац прописал и все.
    Хотя, честно скажу не пробовал, просто как вариант :)

  4. 4

    А ты попробуй сначала, прежде чем писать «прописал и все» :0) Стиль уже итак действует на каждый абзац в блоке .announce, поэтому незачем еще и отдельный класс прописывать.

  5. 5

    Имел ввиду индивидуальный абзац, для него свой класс самое то :)
    Если иначе, то и подход другой, что у тебя и продемострированно :)

  6. 6
    Донецкое СЕО

    Да, хорошая статья. Надо будет обязательно попробовать :)

  7. 7

    Вспомнил :)
    Занимался переносом картинок в анонсе для портатора Lasto в начало параграфа.
    Проблема была несколько иной.
    Вот моя тема на форуме:
    http://xpoint.ru/forums/thread/41974.xhtml#369891
    Если посмотреть приведенный там мной html-код, то весьма похоже на то, что предлагаешь ты.
    Опять же, как вариант.
    Ну и скрипт кому-то может пригодиться.
    У себя на блоге давал описание:
    http://trifler.ru/blog/comment_1201435232.html

  8. 8

    Запомнил на будущее. Спасибо.

  9. 9

    О! Ну наконец-то.. Спасибо :)
    А то надоел мне этот уползающий под картинку текст, который еще и предварительно прямо липнет к её краю..

  10. 10
    Нагорский

    Это всё конечно правильно, жаль только в Google Readere когда я RSS читаю все эти стили пропадают. И текст элегантным образом оказывается под картинкой. Даже в этом посте.

  11. 11

    Sonikelf, пожалуйста. Рад, что пригодилось :)

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

  12. 12
    Андрей Пивников

    Ой спасибо большое, действительно текст ползущий под картинку раздражал очень сильно. Получилось правдf со второго раза.

  13. 13

    Позиционировать абсолютно не стоит по очень простой причине: абсолютно позиционированный элемент с точки зрения основного потока не имеет высоты. Если высота картинки окажется больше, чем у абзаца(ев), она наползёт на следующую область. При стандартизованной высоте можно это нейтрализовать, приписав контейнеру (в данном случае li) height для ие6 и min-height для всех остальных, но это получается лишняя заморочка. Относительное позиционирование таких осложнений не создаёт.

  14. 14

    Княгиня, да, абсолютно с вами согласен.

  15. 15
    alex_a

    Как раз с этой проблемой и борюсь.
    Все отлично, но в Maxthone описанный выше способ «едет». Смещение на пару пикселей влево почемуто.

  16. 16

    alex_a, если я не ошибаюсь, Maxthone работает на движке IE6, а в IE6 я периодически наблюдаю излишний отступ в 3 пикселя у «плавающих» элементов (в данном случае — изображение).

  17. 17
    Дмитрий

    А почему нельзя вместо списков не использовать div с нужным отступом слева? Я бы например так сделал:

    <div class="kullKlass">
     <img ... align="left">
     <p>Текст текст</p>
     <p>Текст текст</p>
     ...
    </div>
    

    И для стиля kullKlass прописал бы нужный отступ слева, и всего делов
    PS: Я не знаю как тут сделать чтоб код в коментарии показывался, так что пока пусть так будет, надеюсь владелец этого блога меня исправит и просвятит

  18. 18

    Дмитрий, суть не в «обертке» (можно использовать хоть списки, хоть дивы), а в технике позиционирования изображения.

    PS: Я не знаю как тут сделать чтоб код в коментарии показывался, так что пока пусть так будет, надеюсь владелец этого блога меня исправит и просвятит

    Вообще-то специально для этого над формой комментирования существуют соответствующие подсказки. Нужно быть чуть внимательнее.

  19. 19

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

    Кто-нибудь знает? =)

  20. 20

    А, ладно =) вопрос снят, не увидел пояснения. Но вот почему британец мне не ответил ума не приложу. =)