CSS отступы

Question

Я хотел бы сделать, как в Indesign или кварка ... отступ абзаца ... для Picure

, как это правильный способ сделать это в HTML и CSS

Я не хочу текст чтобы обойти изображение ... Мне нравится, чтобы вся левая часть была защищена Помещение поля на картинку будет делать трюк ... но для 10-20-30 пикселей (фиксированная сумма (плохая))

я постараюсь отрицательное позиционирование .. не повезло!

это немного изображение, который объясняет!

alt text http://produits-lemieux.com/indent.jpg

Answer 1

Вы пробовали положить обе колонки в и ДИВ и плавучие их влево, как:

<div style="float:left;"> 
    <img src="x"/> 
</div> 
<div style="float:left;"> 
    Text .... 
</div> 

Floating дивы левой будет держать их бок о бок, пока есть достаточно комната.

Answer 2

Если фотографии всегда будут одинаковой ширины, вы можете сделать это довольно легко. Поместите картинку в один div, а контент в другой. Затем используйте следующие css:

div.pic { 
    position: relative; 
    float: left; 
    padding-right: 10px; 
    clear: left; 
    width: 65px; /* The width of the picture */ 
} 

div.content { 
    position: relative; 
    float: left; 
    clear: right; 
    width: 450px; /* The container's width minus (picture + 10px padding) 
} 

Answer 3

Если изображение будет одинаковой ширины, следующий код должен работать (проверен в Safari 4).

В принципе: плавайте изображение влево, затем нажмите текст вправо, используя поля (дополнение также работает). (Запас должен быть по крайней мере, ширина изображения, предпочтительно, она должна быть больше, так что есть зазор между изображением и текстом.)

HTML:

<div class="box"> 
    <img src="http://url.to/image.jpg" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <p class="source">Source: Le Petit Robert 2009</p> 
</div> 

УС:

img { 
    float: left; 
} 

p { 
    margin-left: 80px; 
} 

Answer 4

Если это только один пункт вы обеспокоены, вы можете использовать:

p { 
    overflow: hidden; 
} 

Но это работает просто абзац, который начинается рядом с изображением.

Answer 5

Не рекомендуется во всех случаях, но это хорошая альтернатива, если вы не хотите/не можете редактировать разметку: Equal height columns using Javascript