将 img 放在 <p> 的中间时, 文本不能环绕 img。
代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;}
div{
width:500px;
}
p{
font-size: 30px;
word-break:break-all;
display: inline;
}
span{
font-size: 50px;
color:yellow;
}
img{
width: 30px;
height: 80px;
display: inline-block;
float: right;
}
</style>
</head>
<body>
<div>
<span>Fro</span>
<p>Frontend FrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend<img src="" alt="img">FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFronFrontendFrontendFrontend FrontendFron/p>
</div>
</body>
</html>
它看起来像this .
那么如何让文字环绕在 img 的左侧？？？ 谢谢!
最佳答案
(已编辑)
只需删除 display: inline-block来自你的 img规则并删除 display:inline;来自 p标签(都没有意义):
.
img {
width: 30px;
height: 80px;
float: right;
}
p {
font-size: 30px;
word-break:break-all;
}
关于css - 当将图像放在 <p> 的中间时，将文本环绕在图像周围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37900838/