2013-03-04 3 views
17

Я хочу сделать что-то вроде этогоОбтекание текста вокруг изображения с отступом и обосновывать

enter image description here Проблема в том, что мне нужно p иметь отступы и обосновать, как выравнивание. Я мог бы поместить изображение влево, а затем установить отображение h3 и p в строку, но тогда я не могу установить отступ и, что более важно, сделать текст оправданным. У кого-нибудь есть идеи, как это решить? Благодаря!

ответ

32
img { 
    float: left; 
    margin: 0 20px 20px 0; 
} 

p { 
    text-align: justify; 
    text-indent: 2em; 
} 

Вот скрипка: http://jsfiddle.net/9VkQR/

+0

Я пытаюсь настроить в CMS, где я не могу контролировать структуру HTML. У меня есть открывающий тег P. IMG находится внутри P, и фактический контент (текст) следует за тегом IMG. Это приводит к тому, что первая строка текста находится рядом с нижней частью изображения, а не обернута вокруг него. Если я использую вертикальное выравнивание: сверху на IMG, тогда рядом с изображением появляется рядом текст, прежде чем остальные опустится ниже. Как получить несколько строк текста рядом с изображением, начиная с верхней части изображения? Я могу применить только CSS - не изменять структуру HTML. – youcantryreachingme

+1

Проблема с простым выравниванием влево, если она выше, чем абзац, изображение выйдет из div. Как вы это предотвращаете? –