web-dev-qa-db-ja.com

写真の横にテキストを配置する方法は？

2枚の写真を配置します。1枚はページの上部に、もう1枚はページのすぐ下に配置します。次に、各写真について何かを書きたいので、テキストを各写真の右側に配置します。

これをどのように行うことができますか？

私は写真を次のようにフォーマットしていますが、問題は写真が想定されているように見えることですが、テキストは最初の画像のみであるように見えることです。

<p style="float: left; clear: left"><img src="image.jpg" height="200px" width="200px" border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p style="float: left; clear: left"><img src="image.jpg" height="200" width="200" border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
htmlcssimagetextparagraph
7
HelpNeeder

次のようなラッパーdivを使用するだけです。

<div>
    <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200px" width="200px" border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div style="clear: left;">
    <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200" width="200" border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>

jsFiddleの例

20
j08691

いくつか役立つことがあります：

  1. あなたのスタイルはインラインである必要はありませんが、簡潔にするためにスタイルをそこに置くと仮定しています。

  2. 画像にはラッピングは必要ありません<p>;スタイルは<img>自体に適用できます。

  3. 本当に欲しいのは、それぞれ画像とテキストを含む2つの異なるコンテンツの塊であるように思えます。 <p>要素内に画像を配置することをお勧めします-インラインであり、<p>はブロックです。あなたが試みたように、最初に画像を置き、次にそれを左にフロートします。それはあなたが望んでいることを達成するはずです。

5
chipcullen