左から右の両方に画像が流れており、各画像の横にテキストを配置したいので、次のように指定しました。
<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
私が気付いた問題の 1 つは、テキストの高さが数ピクセルだけわずかにずれているように見えることです。どうすれば 141 ピクセルの高さに合わせることができますか?