Question

我的图像从左到右流动，我希望在每张图片旁边都有我的文字，我给它的是这样的：

    <div>
<p style="float: left;"><img src="images/pic1.jpg" height="141px" width="212px" border="0px"></p>
<p>Etiam ac pellentesque lorem. Aliquam vel quam scelerisque, interdum eros id, ultricies est. Etiam in tristique urna. In a mi sit amet enim faucibus rhoncus. Etiam viverra nisl sed velit commodo rutrum. Nunc malesuada nulla sed nibh aliquet, nec fringilla lacus lacinia. Phasellus sed tristique odio.</p>
</div>

<div>
<p style="float: right;"><img src="images/pic2.jpg" height="141px" width="212px" border="0px"></p>
<p>Etiam ac pellentesque lorem. Aliquam vel quam scelerisque, interdum eros id, ultricies est. Etiam in tristique urna. In a mi sit amet enim faucibus rhoncus. Etiam viverra nisl sed velit commodo rutrum. Nunc malesuada nulla sed nibh aliquet, nec fringilla lacus lacinia. Phasellus sed tristique odio.</p>
</div>

<div>
<p style="float: left;"><img src="images/pic3.jpg" height="141px" width="212px" border="0px"></p>
<p>Etiam ac pellentesque lorem. Aliquam vel quam scelerisque, interdum eros id, ultricies est. Etiam in tristique urna. In a mi sit amet enim faucibus rhoncus. Etiam viverra nisl sed velit commodo rutrum. Nunc malesuada nulla sed nibh aliquet, nec fringilla lacus lacinia. Phasellus sed tristique odio.</p>
</div>

以下是我希望如何复制的示例： http://foundation.zurb.com/page-templates4/banded.html

我注意到的一个问题是文本的高度似乎略微偏离了几个像素，我怎么能将它放到141px的高度？

Answer 1

试试这个CSS：

div {
    clear:both;
}
p {
    margin:0;
}

<强> jsFiddle example

如何对齐图像旁边的文字？

1 个答案: