如何使用文本块设置图像样式？

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

我会为此做两件事。

在您的第一个段落标记上，添加以下样式。这将删除由第一个段落标记引起的间距。

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

在图像上，下面的风格。有时，如果您没有设置垂直对齐，图像将会略微偏离。但我需要看一个JSFiddle来看你的渲染方式。

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

此外，我应该补充说，如果可能的话，这应该使用外部CSS工作表而不是内联工具。