数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

前端应该掌握的CSS实现多列等高布局技巧

来源:脚本之家  责任编辑:小易  

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

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


  • 本文相关:
  • 多列等高的css实现代码
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved