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实现多列等高布局的更多相关文章

  1. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  2. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  3. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  4. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  5. css两列等高布局

    布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...

  6. 正padding负margin实现多列等高布局(转)

    转自: 巧妙运用CSS中的负值 (http://www.webhek.com/post/2345qwerqwer.html) 代码来自: https://codepen.io/Chokcoco/pen ...

  7. 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

    代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

  8. 纯css实现两列等高

    <!doctype html> <html> <head> <meta /> <title>Title</title> < ...

  9. 实现多列等高布局_flex布局

    详情参见此篇博客 http://www.w3cplus.com/css/creaet-equal-height-columns 建议掌握方法四.五 其实,利用最新的flex布局 http://www. ...

随机推荐

  1. LeetCode Length of Last Word 最后一个字的长度

    class Solution { public: int lengthOfLastWord(const char *s) { ; string snew=s; ,len=strlen(s); ]; ) ...

  2. oracle 11g r2卸载

    1. 进入计算机管理>>服务里,停止所有oracle的服务 2. 开始菜单>>程序>>Oracle>>Oracle安装产品>>Univers ...

  3. raw_input功能

    摘要: raw_input()  &  input() raw_input的功能是方便的从控制台读入数据.  input与raw_input都是Python的内建函数,实现与用户的交互,但是功 ...

  4. 将数据库数据添加到ListView控件中

    实现效果: 知识运用: ListView控件中的Items集合的Clear方法 //从listView控件的数据项集合中移除所有数据项 补充:可以使用Remove或RemoveAt方法从集合中移除单个 ...

  5. shiro学习记录(三)

    1.使用ehcache缓存权限数据 ehcache是专门缓存插件,可以缓存Java对象,提高系统性能. l ehcache提供的jar包: 第一步:在pom.xml文件中引入ehcache的依赖 &l ...

  6. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  7. 第22题:链表中倒数第k个结点

    题目描述 题目:输入一个链表,输出该链表中倒数第k个结点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾结点是倒数第1个结点.例如一个链表有6个结点,从头结点开始它们的值依次是1.2.3.4.5 ...

  8. 定位设备--llseek实现

    /** 如果llseek实现lseek和llseek系统调用,如果未定义llseek方法, 内核默认修改file结构体中的f_pos成员来实现定位,如果是操作一个 设备,则需提供自己的llseek方法 ...

  9. Git笔记(流水账)

    命令git checkout -- readme.txt意思就是,把readme.txt文件在工作区的修改全部撤销,这里有两种情况: 一种是readme.txt自修改后还没有被放到暂存区,现在,撤销修 ...

  10. JZOJ 4722. 跳楼机

    Description  DJL为了避免成为一只咸鱼,来找srwudi学习压代码的技巧.Srwudi的家是一幢h层的摩天大楼.由于前来学习的蒟蒻越来越多,srwudi改造了一个跳楼机,使得访客可以更方 ...