0

我正在寻找一种可以重复使用的样式，它将创建以下布局。放置图像并将其向左浮动，然后将带有或不带有段落标签的文本放置在所述图像的右侧。文本将与左侧图像的顶部对齐。

除了文本不在顶部之外，我可以实现一切。这是我到目前为止所拥有的，文本居中而不是顶部对齐。

<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 段。 示例 http://www.spokanewastewater.org/Images/untitled.jpg

4

1 回答 1

2

我会为此做两件事。

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

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

在图像上，下面的样式。有时，如果您不设置垂直对齐，图像会稍微偏离。但是我需要看一个 JSFiddle 才能看到你的渲染方式。

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

另外，我应该补充一点，如果可能的话，这应该使用外部 CSS 表而不是内联来完成。

于 2013-04-16T15:31:47.350 回答