CSS壓痕

Question

我喜歡做的事，如InDesign或夸克......段落縮進......對於picure

是如何做到這一點的HTML和CSS

我不想文本的正確方法走輪圖像... 我喜歡整個左部保護 投入保證金的圖片就可以了，而是爲了10-20-30像素（固定數額（壞））

我嘗試了負面定位..沒有運氣！

這裏是一個小小的圖像解釋！

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

Answer 1

你有沒有試圖把兩者列和DIV和浮動他們離開，如：

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

離開將讓他們並排側，只要有足夠的浮動的div房間。

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中測試）。

基本上：將圖像浮動到左側，然後使用邊距將文本向右推（padding也可以）。 （裕度必須是圖像的至少寬度;優選地，它應該是更大，使得有圖像和文本之間的間隙。）

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> 

CSS：

img { 
    float: left; 
} 

p { 
    margin-left: 80px; 
} 

Answer 4

如果它僅僅是一款你擔心，你可以使用：

p { 
    overflow: hidden; 
} 

但是，對於工作只是在圖片旁邊開始的段落。

Answer 5

在任何情況下不推薦，但一個很好的選擇，如果你不想/不能編輯您的標記：Equal height columns using Javascript