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

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

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

Answer 3

您实际上需要向左浮动图像。这将导致您想要的行为 - 让文本环绕图像。

Answer 4

您可以在css中使用span tages或使用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 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>

如何使用CSS在图像周围包装文本

5 个答案: