投稿
投稿
投稿
反馈
评论 返回
顶部

内容字号: 默认 大号超大号

段落设置: 段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

CSS实现图片悬浮动(float:right)在文字文章右上角,文字自适应

发布:2018-06-29 15:56 浏览: 评论(
今天突然遇到需要将图片浮动在正文右上角的样式,以前做过可就是一时想不起来了,去百度搜索,竟然搜不到答案,真是汗颜,这样只好自己写一篇了,看看怎么实现,示意图如下:




其实要实现这样的效果很简单,图片容器和正文容器放置的位置很重要:

HTML:
<div class="article-content">
   <div class="img-box"><img src="xxxx.jpg" /></div>
   <p>正文内容123456正文内容</p>
   <p>正文内容123456正文内容</p>
   <p>正文内容123456正文内容</p>
    ......
</div>

//记得图片容器一定要放在最前面才可以
//注:上图第一行是有意要放最前面的
//所以只要是放在float元素后面的都会文字环绕图片
CSS

.img-box{float:right;}

//其实这里就是这么简单,关键是图片容器位置放对了就可以,
//因为很多时候我们容易将图片放在最后,导致浮动被正文标签顶下来;
//赶紧去试试吧
前端新手交流群
欢迎加入web前端新手交流qq群:734802480
分享给小伙伴们:

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2019 seozhijia.net 版权所有-粤ICP备13087626号-4