如何使用CSS在图像周围缠绕文本

以下是我的代码。我希望将文字包裹在图像上。我用q {float: left; width: 100%}。然而，文字出现在图片下方。如何使用CSS在图像周围缠绕文本

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

是否有任何其他方式来包裹我的文字在图像周围？谢谢！

来源

2015-04-20 Lunana

将<q>显示属性更改为display:inline并删除width属性。这会将它与图像对齐

来源

2015-04-20 00:19:08

您实际上需要将图像浮起。这将导致你想要的行为 - 让文字环绕图像。

来源

2015-04-20 00:19:59 Jonathan

您可以使用跨度每日新闻或你的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>

来源

2015-04-20 00:22:25

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

来源

2015-04-20 00:24:27

这将是没有内嵌样式更好！ –

你想浮动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>

来源

2015-04-20 00:36:45

如何使用CSS在图像周围缠绕文本

回答

相关问题