如何使用文本塊設置圖像的樣式？

Question

我期待創建一個我可以重複使用的樣式，它將創建以下佈局。 放置圖像並將其向左浮動，然後讓文字有或沒有位於圖像右側的段落標籤。文本將對齊左側圖像的頂部。

我可以實現一切，除了文字不位於頂部。這是我到目前爲止，文本居中，而不是頂端對齊。

<div style="overflow:auto"> 
<div style="float:left"> 
    <a href="Images/img.jpg"><img src="Images/img.jpg" /></a> 
</div> 
<div> 
    <p>this is some text that is getting centered along the img height</p> 
    <p>Some more text... </p> 
</div> 
</div> 

這樣做的例子。我需要3段對齊到圖像的頂部和第4如何它已經。 example http://www.spokanewastewater.org/Images/untitled.jpg

Answer 1

我會爲此做2件事。

在您的第一個段落標記上，添加下面的樣式。這將刪除由第一個段落標記引起的間距。

<p style="margin-top:0;padding-top:0"></p> 

而在圖片上，下面的風格。有時候，如果你不設置垂直對齊，圖像會稍微偏離。但我需要看到一個JSFiddle來查看你的渲染方式。

<img style="vertical-align:top"> 

另外，我要補充一點，這應該與外部CSS片來完成，而不是內聯，如果可能的話。