CSS 图片浮动导致页面无垂直拓展
2017-10-11 19:53
211 查看
编写图片和文字横向排列的页面,当图片不是此div的结束标签时,div无法做到以图片大小自适应页面高度,而是以最后的文段为拓展延伸标准。(在div有背景颜色,或后面内容要对齐时造成影响)
页面的html如上
页面的CSS如上
![](https://img-blog.csdn.net/20171011194811194?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2luZ0FuMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
页面效果如上
当我们需要使图片和文段横向排列时,使用浮动float样式。
![](https://img-blog.csdn.net/20171011194855681?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2luZ0FuMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
页面效果如上
做到了浮动,文段围绕图片。但是页面类为 all 的 div 无法垂直延伸,白色区域没有覆盖到图片。
原因:div 以内部最后一个标签为标准设置默认高度,当文段作为最后标签,div 无法自适应图片的高度。
解决方案:
清除浮动
1、当后面有标签时,给后面的标签,清除浮动。例如当有另一个标题时,可以清除浮动,而不再围绕图片。
2、当后面没有标签时,添加一个空白div标签 可命名class为spacer,并为此清除浮动。即可
html 如上
CSS 如上
![](https://img-blog.csdn.net/20171011215025434?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2luZ0FuMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
效果如图
当我们需要多个图片文段排列时
效果图如下:
![](https://img-blog.csdn.net/20171012133927697?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2luZ0FuMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
可以在h2处清除浮动
CSS如下:
注意:最后一个仍需要添加一个空白div使页面垂直延伸
如有建议和疑问可联系
QQ:1017386624
邮箱:1017386624@qq.com
<body> <div class="all"> <h1>这是我的标题啦</h1> <img src="img/1.jpg" /> <p>只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落</p> <p>只是段落段落只是段落段落只是段落段落只是段落段落只是段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落</p> </div> </body>
页面的html如上
@charset "utf-8"; body{ margin: 30px; background-color: #ccc; } .all{ width: 90%; background-color: #ffffff; margin: 0 auto; /*水平居中(左右)*/ }
页面的CSS如上
页面效果如上
当我们需要使图片和文段横向排列时,使用浮动float样式。
.all img{ float: left; }
页面效果如上
做到了浮动,文段围绕图片。但是页面类为 all 的 div 无法垂直延伸,白色区域没有覆盖到图片。
原因:div 以内部最后一个标签为标准设置默认高度,当文段作为最后标签,div 无法自适应图片的高度。
解决方案:
清除浮动
1、当后面有标签时,给后面的标签,清除浮动。例如当有另一个标题时,可以清除浮动,而不再围绕图片。
2、当后面没有标签时,添加一个空白div标签 可命名class为spacer,并为此清除浮动。即可
<div class="spacer"></div>
html 如上
.all .spacer{ clear: left; }
CSS 如上
效果如图
当我们需要多个图片文段排列时
效果图如下:
可以在h2处清除浮动
CSS如下:
.all h2{ clear: left; /*清除浮动*/ padding-top: 20px; padding-left: 10px; }
注意:最后一个仍需要添加一个空白div使页面垂直延伸
.all .spacer{ clear: left; }
如有建议和疑问可联系
QQ:1017386624
邮箱:1017386624@qq.com
相关文章推荐
- CSS解决页面图片水平垂直居中问题的方法
- CSS垂直翻转背景图片重用实例页面(类似淘宝的上下倒三角)
- 网页缓存Js,css以及图片导致页面刷新无效果的三种解决办法
- 网页缓存Js,css以及图片导致页面刷新无效果的三种解决办法
- 化图片为CSS页面的独门技巧
- css使 同一行内的 文字和图片 垂直居中对齐?
- css图片垂直居中
- 如何让一个不固定高宽的图片,垂直和水平居中在页面中间?
- div+css布局控制div定位浮动层在背景图片上的半透明阴影效果
- 小技巧:用CSS如何实现单行图片与文字垂直居中
- 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
- css实现图片水平垂直居中
- CSS图片响应式 垂直水平居中
- css 单行文字 图片垂直居中
- toot2008@126.com(W3C标准) ASP.NET + CSS 设置 图片等比放缩、水平居中、垂直(竖直)居中
- js+css图片自动等比例缩小且垂直居中
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- web设计_7_页面缺失图片或CSS的情况下仍然易读
- CSS-同一个li下,图片和文字一起,如何使得全部垂直居中
- nginx 反向代理转发导致css,js,图片失效