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

您可以使用以下css

img, p {
    display:inline-block;
}

Answer 2

只需将此添加到您的css

即可

＆＃13;

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

＆＃13;

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

＆＃13;

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

Float是执行此操作的正确方法。

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属性可用于包装文本图像周围。

<p>显示在<img/>标记下，没有<br/>

5 个答案: