如何使用CSS在圖像周圍纏繞文本

Question

以下是我的代碼。我希望將文字包裹在圖像上。我用q {float: left; width: 100%}。然而，文字出現在圖片下方。

<p class = "review"> 
    <img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" /> 
    <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q> 
</p> 

是否有任何其他方式來包裹我的文字在圖像周圍？謝謝！

Answer 1

將<q>顯示屬性更改爲display:inline並刪除width屬性。這會將它與圖像對齊

Answer 2

您實際上需要將圖像浮起。這將導致你想要的行爲 - 讓文字環繞圖像。

Answer 3

您可以使用跨度每日新聞或你的CSS使用display:inline：

Working demo

<span>Hello!</span><span><img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" /></span><span>How are you!</span> 

Answer 4

<p class = "review"> 
 
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" style="float:left"/> 
 
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q> 
 
</p>

Answer 5

你想浮動image不q

.review {width:100%;} 
 
.review img {float:left; margin:7px; vertical-align:top;}

<p class = "review"> 
 
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" /> 
 
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q> 
 
    <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q> 
 
    <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q> 
 
</p>