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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  10. Андрей Пивников
    15 лет 4 месяца назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  19. akella, я рад, что ты понял :0)

    Но вот почему британец мне не ответил ума не приложу.

    Я это заметил. Наверное он игнорирует нерусских =)