26 июня 2009 г.

Как заставить текст не обтекать картинку при помощи CSS

Такое, увы, бывает очень часто - на подробное изучения какого-то предмета времени нет, а вот конкретную проблему решить надо...

К примеру, пришлось по работе скопи-пастить визуальный вид одной промо-странички. И понадобилось отключить обтекание текста для некоторых картинок. С таблицами возиться неохота - там было много картинок, пришлось искать решение через CSS.

И чтобы Вам не пришлось проделывать то же самое (искать, имеется в виду) - вот готовое решение.

Итак,

как с помощью CSS отключить обтекание картинок текстом

Если мы просто возьмем, да и пропишем у тега с картинкой атрибут align="left" (выравнивание по левому краю), то нас ждет разочарование (как на верхнем примере на картинке). Текст, дойдя до края картинки, начнет ее обтекать (или "обволакивать", если по другому выразиться).

Но если для картинки прописать стиль style="float: left" (т.е., тег картинки будет выглядеть как <img src="наша-картинка.jpg" width="137" height="200" style="float: left">); а затем для текста, который рядом с картинкой (для параграфа) укажем стиль style="overflow:hidden;" (<p style="overflow:hidden;">) - то текст картинку обтекать не будет. 

Вот как все выглядит на практике:

P.S. После того, как Вы отключите обтекание, то увидите, что текст прижимается прямо к картинке. Что, конечно же, не есть хорошо. Поправить это довольно просто - надо для текста (для параграфа) дописать стиль padding-left:10px; - ну, или сколько вы там пикселей (или пунктов, или процентов) хотите. Да и все дела.

7 комментариев :

  1. Спасибо большое, как раз искал как это сделать, оказывается можно. :)

    ОтветитьУдалить
  2. если тексту присвоить стиль аля style="float: left", то получится тоже самое)

    ОтветитьУдалить
  3. Спасибо, а то чёт в голову не приходило, все пишут как сделать обтекание картинки

    ОтветитьУдалить
  4. А как сделать чтобы вообще текст был под картинкой, вообще его не обтекал?

    ОтветитьУдалить