黑松山资源网 Design By www.paidiu.com
1、引言
我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户体验不是很好!
实际的问题效果如下所示:
2、需求如下
我们要实现的效果就是不管每个栏目的实际内容多少,都要保证每个栏目是对齐的。
3、如何解决
HTML代码如下所示:
<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代码如下所示:
.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代码如下所示:
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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 魏新雨《为你祈祷+新歌精逊2CD[WAV]
- 影心、明萨拉你选哪个?国外美女COS《博德3》
- 澳洲女子骑车跌入“自杀树”丛 疼痛持续9个月崩溃
- 育碧公布2024“她创力”计划:为女性游戏人提供辅导
- 刘美君.2017-千色·30总选3CD【环球】【WAV+CUE】
- 群星.2022-星河长明电视原声带【乐有奇思】【FLAC分轨】
- 陈淑桦.1995-淑桦盛开Forever【滚石】【WAV+CUE】
- 《再来一张》评测:出师成败皆系“赌”
- 《银河汉堡店》测评:我是银河走菜王!
- 《末日地带2》评测:酣畅淋漓的“和面”之旅
- 萧煌奇《没事的》[320K/MP3][96.22MB]
- 萧煌奇《没事的》[FLAC/分轨][263.38MB]
- 群星《音你而来 第6期》[320K/MP3][90.61MB]
- 交错战线爬塔攻略一览
- 战锤40K星际战士2全近战武器使用教学|近战武器连招表