Question

将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的左侧？谢谢！

Answer 1

（编辑）的

只需清除display: inline-block规则中的img，然后从display:inline;标记中删除p（两者都没有意义）：

img {
  width: 30px;
  height: 80px;
  float: right;
}
p {
   font-size: 30px;
   word-break:break-all;
}

http://codepen.io/anon/pen/XKjpqM

当img位于<p>

1 个答案: