排列五投注选号技巧:www.xy5um.com.cn - 路饭网

搜索: 您的位置排列5 > 电脑频道 > 电脑教程 > 阅读资讯:前段CSS实现多列等高布局技巧大全

前段CSS实现多列等高布局技巧大全

2018-06-20 11:47:53 来源:排列5 www.xy5um.com.cn 【

排列5 www.xy5um.com.cn 前段CSS实现多列等高布局技巧大全

1、引言

我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户体验不是很好!

实际的问题效果如下所示:

前段CSS实现多列等高布局技巧大全

2、需求如下

我们要实现的效果就是不管每个栏目的实际内容多少,都要保证每个栏目是对齐的。

前段CSS实现多列等高布局技巧大全

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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。

 

本文地址://www.xy5um.com.cn/dnjc/98915.html
Tags: 应该 掌握 前端
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | 排列5 | 返回顶部
  • 肥西:居民楼前路面塌出大坑 面积数十平米 2019-02-22
  • 拜博口腔医疗集团创始人、董事长黎昌仁获第十二届人民企业社会责任奖年度人物奖 2019-02-21
  • 动漫微视频:春天里的叮嘱与承诺 2019-02-21
  • 成都一男子连撞3人 危害公共安全被刑拘 2019-02-21
  • 高考阅卷宽容瑕疵 成绩6月23日发布 压轴大题已有20余个满分 2019-02-21
  • “龙舟水”今起送清凉 安徽局地降雨量或达150毫米 2019-02-20
  • 好事要支持,解决劳动力更是好事 2019-02-20
  • 七成网购纠纷来自这两大平台,最易出问题的商品是…… 2019-02-20
  • 权威!个税起征点提至每月5000元,财政部最新解释来了 2019-02-20
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-02-19
  • “黔电送粤”配套大型煤矿项目获批 盘江股份控股 2019-02-19
  • Le calendrier deux sessions de Xi Jinping 2019-02-19
  • QS世界大学排名发布:中国11所大学进百强,清华排名创历史 2019-02-19
  • ECCO2016春夏流行趋势一览 让你的春天炫出彩虹 2019-02-18
  • 新疆旅游系列活动亮相旅博会 特色产品成焦点--旅游频道 2019-02-18
  • 125| 328| 249| 365| 771| 391| 336| 893| 204| 344|