[英]<p> is displayed under <img> tag without <br>
<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p> <p>text 2</p>
我的text1和text2在图像下面,但是我没有使用<br>
标签。
有什么方法可以做到:'img here''text1''text2'吗? 谢谢。
您可以为此使用Following CSS
img, p {
display:inline-block;
}
只需将其添加到您的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> <p>text 2</p>
可以使用名为display:inline
CSS属性!
<img src=".."/>
<p style="display:inline">text1</p>
<p style="display:inline">text1</p>
最好总是使用一个类并将样式分配给该类,而不是直接将其分配给元素。 这样可以更好地控制将特定样式应用于哪个元素。
.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> <p class="text2">text 2</p>
浮动是执行此操作的正确方法。
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属性可用于在图像周围包裹文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.