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

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

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

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

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

  1. img {float: left;}
    p{margin-left:135px;}
    И незачем огород городить.

  2. О то что и искал, спасибо огромнейшее!

  3. 40a, да, действительно. Спасибо за вариант.

  4. интересный вариант, я обычно задаю hspasce и vspace чтобы текст не прилипал к рисунку

  5. Александр, в соответствии с xhtml-стандартом нельзя использовать параметры hspasce и vspace.

  6. cssing.org.ua/2005/07/03/display-table/ — это просто

    а в статье — усложнено и семантически неправильно.

  7. Seigiard, прежде чем давать эту ссылку, нужно было внимательно прочитать мою статью.

  8. Почитал, ну что можно сказать достойно внимания, только прошу обратить внимание и на мою реализации данной задачи:

    <ul>
        <li>
            <img src="image.jpg" alt="" />
            <h2>Заголовок текста</h2>
            <p>Параграф с текстом</p>
      </li>
    </ul>

    И обрабатываем все вот этим клочком CSS:

    ul li {
        padding-left: 147px;
    }
    ul li img {
        float: left;
        margin-left: -135px;
    }
    

    в итоге задачу решаем полностью, а кода на 2 строки меньше, да и по элегантней смотриться, всего…

  9. Shur, спасибо. Тоже хороший вариант.

  10. Также отправил этот вариант его создателю, получил одобрение и признание того, что мой вариант более гибок и дает больше возможностей.
    Так что можете смело использовать.

  11. Да и с браузерами будет меньше проблем, особенно если потребуется для этого изображения создать рамку, отступы (padding) и т. д.

  12. Кстати, а чем не подходит такое решение:

    В html-виде редактора записи картинку прописываем следущим образом (т.е. добавляем параметры margin-left: N px; margin-right: N px;):

    Где N — нужное число (я указываю 10px и 15px для margin-left и margin-right соответсвенно).

  13. Sonikelf, что-то я не понял вашего решения.

  14. Черт, написал длинный коммент, но его захавало спамфильтром.
    Впрочем, наверное то, что я описал не совсем по теме, ибо Вы говорили про верстку, а я про картинки и текст в записях. Впрочем, вполне вероятно, что в верстке это тоже бы сработало.
    Вообщем, если спамфильтр не захавал насмерть коммент, а сложил куда-то — гляньте, может я о том и пригодится, а может нет :)

  15. Видимо все-таки спам-фильт захавал коммент насмерть =) Все ваши комменты здесь. В спаме ничего нет.

  16. Жалко. Писал долго и много :)
    Потом может перепишу. Как-нибудь.

  17. Спасибо. Давно хотел так сделать, но все руки не доходили найти описание.

  18. А не проще ли вот так:

    
    <div class="txt">
    <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; }
    
    
  19. Александр, прочитайте внимательно статью, прежде чем писать это.

  20. Вот еще похожее решение нашел :)
    Статья: ghettocooler.net/2005/11/13/
    Пример: ghettocooler.net/img/floats-no-wrap/
    Давненько было написано :)