CSS实现多列等高 |
您所在的位置：网站首页 › viewbottom正负 › CSS实现多列等高 |
CSS实现多列等高
|
今天看到一个非常有意思的问题，怎样实现多列等高，特以此文记录一下： 1.使用margin-bottom&padding-bottom正负相抵代码如下 露从今夜白 月是故乡明露从今夜白 月是故乡明露从今夜白 月是故乡明 露从今夜白 月是故乡明露从今夜白 月是故乡明露从今夜白 月是故乡明 露从今夜白 月是故乡明露从今夜白 月是故乡明露从今夜白 月是故乡明 露从今夜白 月是故乡明露从今夜白 月是故乡明露从今夜白 月是故乡明 露从今夜白 月是故乡明露从今夜白 月是故乡明露从今夜白 月是故乡明 露从今夜白 月是故乡明露从今夜白 月是故乡明露从今夜白 月是故乡明 露从今夜白 月是故乡明露从今夜白 月是故乡明 样式代码： .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把子元素多出来的色块背景隐藏掉。 结果如下： 因为表格中table-cell默认等高 .Article { display: table; width: 100%; table-layout: fixed; } .Article>li { display: table-cell; width: 200px; border-left: solid 5px currentColor; border-right: solid 5px currentColor; color: #fff; background: #4577dc; } .Article>li>p { padding: 10px; }结果：
flex中的伸缩项目默认为拉伸为父元素的高度，同样可以实现等高效果。在pc端兼容性不是很好，在ie9以及ie9以下不支持。 4、grid布局 .Article { display: grid; grid-auto-flow: column; grid-gap: 20px; } .Article>li { border-left: solid 5px currentColor; border-right: solid 5px currentColor; color: #fff; background: #4577dc; } .Article>li>p { padding: 10px; }grid布局的缺点和flex一样，pc端兼容性不是很好，ie9以及ie9以下不支持。 5、js计算 .Article>li { float: left; border: solid 5px #fff; width: 33%; color: #fff; font-size: 16px; background: #4577dc; } .Article>li>p { padding: 10px; } jQuery( document ).ready(function() { setEqualheight(); }); jQuery(window).resize(function() { jQuery('.js-article-item').css('height','auto'); setEqualheight(); }); function setEqualheight() { var height = jQuery(".js-article-item").map(function() { return jQuery(this).height(); }).get(); jQuery(".js-article-item").height( Math.max.apply(null, height) ); } 以上是经常使用的实现CSS多列等高的方法 |
【本文地址】