话题 首页 > HTML5教程 > HTML5教程话题列表 > 详情

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

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

界面需求需要用HTML+CSS实现类似word中文字环绕的效果,求给点灵感,传授下实现的思路。

类似上图这种效果!

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>
2016-10-24

可以试试这段代码,效果应该就是你想要的类型。另外有一些其他插件也可以实现你需要的效果,功能上会更强大

stackoverflow 这个插件也可以实现,如果觉得上面的方法不满意你可以试试这个插件

371515375 2016-10-28

右下角的display:inline-block,在配合定位或者浮动.

一笔荒芜 2018-05-31

大神在哪里呀,大神在哪里呀,大神在哪里呀.

1144100656 2018-05-31

刚学习程序,过来学习学习!!!!...

1152696398 2018-05-31

这个领域不太懂!! 还是坐等大佬吧...

要回复,请先登录 或者注册
二维码
建议反馈
二维码