如何让字体包围在图片周围?

控心控脑
  • 443
    <style type="text/css">
      div {
        width:400px;
        height: 300px;
      }
      img {
        float: right;
      }

    </style>
<div>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2277586695,4028601478&fm=116&gp=0.jpg" alt="">
<strong>asdasdadasdassssssssssssssssssssssssssssssssssssssssssssssssdasdasdasdasdasdasd</strong>
</div>

图片描述

我想要达到这种效果
图片描述

评论
阅读 5k
2 个回答
✓ 已被采纳

谢邀。
感看到题目的第一反应是:"一个float不就搞定了吗?"仔细看了下题主给出的例子中,也有设置了float属性,但是再看看效果图... 第一时间没反应过来,也懵逼了,喝了口水终于反应过来了!
你把那串sssssssss换成一段中文试试看!图片描述
知道问题出在哪里了没?你写的一长串s没有空格 被浏览器当做一个单词来解析了,默认单词不会被打断,所以甚至你给div设置了宽度都没用,为了验证,不妨在div的css里面再加上一句 word-break:break-all;图片描述喏!可以了吧。
这个故事告诉我们:喝水有利于写代码。啊哈哈哈~

把图片放文字里面

效果

宣传栏