前端应该掌握的CSS实现多列等高布局技巧
发布时间:2018-06-05 15:23:04 作者:yuanyong 我要评论
我们在写页面的时候,有的时候会遇到多栏布局,这篇文章主要介绍了前端应该掌握的CSS实现多列等高布局技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
1、引言
我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户体验不是很好!
实际的问题效果如下所示:
2、需求如下
我们要实现的效果就是不管每个栏目的实际内容多少,都要保证每个栏目是对齐的。
3、如何解决
HTML代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < ul class = "Article" > < li class = "js-equalheight" > < p > 一家将客户利益置于首位的经纪商, 为客户提供专业的交易工具一家将客户利益置于首位的经纪商, 为客户提供专业的交易工具一家将客户利益置于首位的经纪商, 为客户提供专业的交易工具一家将客户利益置于首位的经纪商,为客户提供专业的交易工具 </ p > </ li > < li class = "js-equalheight" > < p >一家将客户利益置于首位的经纪商,为客户提供专业的交易工具 一家将客户利益置于首位的经纪商,为客户提供专业的交易工具</ p > </ li > < li class = "js-equalheight" > < p >一家将客户利益置于首位的经纪商</ p > </ li > </ ul > |
(1)纯CSS方式解决
CSS代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .Article{ overflow : hidden ; } .Article>li{ float : left ; margin : 0 10px -9999px 0 ; padding-bottom : 9999px ; background : #4577dc ; width : 200px ; color : #fff ; } .Article>li>p{ padding : 10px ; } |
分析说明:元素设置的padding-bottom尽可能大一些,并且需要设置一样大小的margin-bottom负值去抵消padding-bottom撑大的区域,正负一抵消,对于页面布局不会有影响。另外的话还需要设置父元素overflow:hidden把子元素多出来的色块背景隐藏掉,上述CSS解决方法没有任何兼容性问题,可以放心使用哈。
(2)js方式解决
js代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | jQuery( document ).ready( function () { equalheight(); }); jQuery(window).resize( function () { jQuery( '.js-equalheight' ).css( 'height' , 'auto' ); equalheight(); }); function equalheight() { var heights = jQuery( ".js-equalheight" ).map( function () { return jQuery( this ).height(); }).get(), maxHeight = Math.max.apply( null , heights); jQuery( ".js-equalheight" ).height(maxHeight); } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了css设置多列等高布局的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-09-21
- 这篇文章给大家介绍了三个小节的内容,其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局,有需要的可以参考2016-09-12
- 下面小编就为大家带来一篇浅析CSS等高布局的6种方式。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-04
- 页面布局中经常遇到等高布局的情况,为了得到更好的视觉效果,就要实现DIV等高布局的效果。以最普遍的DIV三列布局来说2014-09-03
- 这种情况下就需要两列的高度保持一致了,左边高度增加,右边也跟着增加,右边高度增加,左边同样也要增加,否则就会出现“断层”的效果,接下来将介绍多列等高的实现方法,2012-12-03
- CSS网页布局实例:三栏等高布局.2009-08-29
- 网页制作Webjx文章简介:为了让网页更美观、协调,有的时候需要用到左右等到布局,传统的等高布局是用 javascript 实现的,现在来看看 silence 发明的真正的 CSS 实现的等2009-04-02
- 三列等高CSS布局的一个实例, 修改国外的一个demo, 兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。 不过hack太多,不是很喜欢这样做。 全部代码如下2008-10-17
- 本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现各个元素高度都相当的效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看2019-01-09
最新评论