如何在圖片旁邊放置文字？

Question

我想放置2張圖片，一張在頁面頂部，另一張在右下。然後，我想寫一些關於每張圖片的內容，並且希望文本位於每張圖片的右側。

這怎麼辦？

我格式化我的照片如下，但問題是，圖片是像他們所設想的，但文本似乎是隻有第一個圖像。

<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> 

Answer 1

只需使用一些包裝的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例如

Answer 2

有兩件事情可以幫助：

1. 你的風格並不需要是內聯，但我假設你把他們那裏爲簡潔起見。

2. 圖片不需要包裝<p>;這些樣式可以應用於<img>本身。

3. 這聽起來像你真正想要的是兩個不同的內容塊，每個塊都有一個圖像和一些文本。我建議將圖像放置在<p>元素內 - 它是內聯的，而<p>是塊。按照你的想法先放置圖像，然後將它浮到左邊。這應該能夠實現你的目標。