HTML+CSS如何实现文字环绕的效果

精华

鹏鱼燕 2016-10-24 11:51:27 浏览(11093) 回复(6) 赞(0)

界面需求需要用HTML+CSS实现类似word中文字环绕的效果，求给点灵感，传授下实现的思路。 ![](http://www.w3cschool.cn:/attachments/image/20161024/1477281071291558.png) 类似上图这种效果！

标签： html html5 css css3

回答(6)

陈 2016-10-24

<div style="float:left;">
  <div style="float:left;height:100px;width:1px;"></div>
  <div style="float:right;height:250px;width:250px;
  clear:left;background:#F00;margin:5px 5px 5px 0;">
  </div>
  <p>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
  新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
</p>
</div>