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. 六、C++离散傅里叶逆变换

    C++离散傅里叶逆变换 一.序言: 该教程承接上文的离散傅里叶变换,用于进行离散傅里叶逆变换. 二.设计目标 对复数数组进行离散傅里叶逆变换,并生成可供使用的图像类. 三.详细步骤 输入:经傅里叶变换 ...

  2. System Center Configuration Manager 2016 必要条件准备篇(Part1)

    步骤4.创建系统管理容器 SCCM 2016 配置管理系列(Part 1- 4) 介绍AD01上配置了Active Directory域服务(ADDS),然后将Configuration Manag ...

  3. jQuery-名称符号$与其他库函数冲突

    1.通过全名替代简写的方式来使用 jQuery jQuery("button").click(function(){ jQuery("p").text(&quo ...

  4. OpenGL glReadPixels 转成 CImage

    本来是一件很简单的事情,就是将View上使用OpenGL画出来的数据生成图片让其实现打印的功能,我们知道MFC提供打印的接口是不支持OpenGL的(至少我不清楚),必须将它转成GDI再画在Print的 ...

  5. ssh: connect to host localhost port 22: Connection refused

    1.hadoop安装好之后,执行ssh localhost无法执行, 提示“ssh: connect to host localhost port 22: Connection refused”. 2 ...

  6. Java第六次作业:RuPengGame setGameSize setGameTitle alert loadBgView playSound pause closeSound confirm input createText setTextPosition setTextColor setTextFontSize hideText showText CreateImage(number)

    package com.swift; import java.awt.Color; import com.rupeng.game.GameCore;//导入游戏引擎包 //实现Runnable接口 p ...

  7. mysql 复制一列到另一列

    https://www.cnblogs.com/clphp/p/6251469.html

  8. git线上线下冲突

    今天用git pull来更新代码,遇到了下面的问题: error: Your local changes to the following files would be overwritten by ...

  9. Linux-git安装

    基本操作 安装yum install git 生成SSH KEY :先cd ~/.ssh,在这个目录下输入ssh-keygen,一直回车就可以了,这个时候就会出现id_rsd.pub公钥和id_rsa ...

  10. Install Jenkins 2.1.36 and openjdk 1.7.0 on centos 7

    #!/bin/bash## Copyright (c) 2014-2015 Michael Dichirico (https://github.com/mdichirico)# This softwa ...