<p> 顯示在 <img> 沒有標簽 <br>

Question

 <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p>&nbsp;&nbsp;&nbsp;<p>text 2</p> 

我的text1和text2在圖像下面，但是我沒有使用<br>標簽。
有什么方法可以做到：'img here''text1''text2'嗎？ 謝謝。

Answer 1

您可以為此使用Following CSS

img, p {
    display:inline-block;
}

Answer 2

只需將其添加到您的CSS

 img{ display:inline; } p{ display:inline; } 

 <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p>&nbsp;&nbsp;&nbsp;<p>text 2</p> 

Answer 3

可以使用名為display:inline CSS屬性！

 <img src=".."/>

 <p style="display:inline">text1</p>

 <p style="display:inline">text1</p>

Answer 4

最好總是使用一個類並將樣式分配給該類，而不是直接將其分配給元素。 這樣可以更好地控制將特定樣式應用於哪個元素。

 .my-img,.text1,.text2 { display: inline-block; margin-right: 5px; } 

 <img class="my-img" src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p class="text1">text 1</p>&nbsp;&nbsp;&nbsp;<p class="text2">text 2</p> 

Answer 5

浮動是執行此操作的正確方法。

 img { float: left; padding-right:5px; } 

 <img src='http://placehold.it/220x220'> <p> Some text here. </p> <p> Some more text to follow. </p> 

這不僅是我的觀點。 來自w3schools的報價：

最簡單的用法是，float屬性可用於在圖像周圍包裹文本。