实现多列等高布局的几种方法

1、文章引言

我们在写页面的时候,经常会遇到多栏布局的情况,如果栏目带有背景色并且栏目内容高度不一样的话,就会导致每个栏目的底部是无法不齐的,这样在排版布局以及给用户的体验不是很好!

2、需求如下

我们要实现的效果就是当各个栏目内容不一样的情况下,保证各个栏目还是对齐的。

3、如何解决

HTML结构代码如下所示:

 <ul class="Article">
    <li class="js-article-item">
      <p>
      一家将客户利益置于首位的经纪商,
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商,
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商,
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商,为客户提供专业的交易工具
      </p>
    </li>
    <li class="js-article-item">
      <p>一家将客户利益置于首位的经纪商,为客户提供专业的交易工具
      一家将客户利益置于首位的经纪商,为客户提供专业的交易工具</p>
    </li>
    <li class="js-article-item">
      <p>一家将客户利益置于首位的经纪商</p>
    </li>
  </ul>

1、使用负margin-bottom和正padding-bottom对冲实现

.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把子元素多出来的色块背景隐藏掉。

2、模仿table布局

.Article {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.Article>li {
  display: table-cell;
  width: 200px;
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}

table元素中的table-cell元素默认就是等高的。

3、flex布局

.Article {
  display: flex;
}

.Article>li {
  flex: 1;
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}

flex中的伸缩项目默认为拉伸为父元素的高度,同样可以实现等高效果。在pc端兼容性不是很好,在ie9以及ie9以下不支持。

4、grid布局

.Article {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 20px;
}

.Article>li {
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}

grid布局的缺点和flex一样,pc端兼容性不是很好,ie9以及ie9以下不支持。

5、js计算

.Article>li {
  float: left;
  border: solid 5px #fff;
  width: 33%;
  color: #fff;
  font-size: 16px;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}
jQuery( document ).ready(function() {
  setEqualheight();
});

jQuery(window).resize(function() {
  jQuery(‘.js-article-item‘).css(‘height‘,‘auto‘);
  setEqualheight();
});

function setEqualheight() {
  var height = jQuery(".js-article-item").map(function() {
    return jQuery(this).height();
  }).get();

  jQuery(".js-article-item").height( Math.max.apply(null, height) );
}

6、小结

如果有什么疑问或者更好的建议,欢迎在评论区留言。文笔有限,文中若有不正之处,万望告知!



原文地址:https://www.cnblogs.com/art-poet/p/12557108.html

时间: 2024-10-31 23:50:18

实现多列等高布局的几种方法的相关文章

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

使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hiden把溢出背景切掉. html代码 <div id="wrap"> <div id="left"> <p> left</p> <p> left</p> <p> left</p>

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

最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西. 第一个css属性就没有看懂.于是乎,开始各种找资料,各种看书.这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍. 以下的内容会分为如下小节: 1.关于css3中flexbox需要掌握的概念 2.flexbox实现水平垂直居中对齐 3.三列等高自适应,页脚区域黏附底部的布局 1.关于css3中flexbox需要掌握的知识 因为对于三列等高

任意列+左右两列等高布局,并要求有最小高度

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

多列等高布局

多列等高布局是在一个容器里面,并排的多列,如果内容的高度无法在一开始确定(例如内容是动态的),又需要让各列自然地撑开(不出现每列里面的滚动条),这时候需要用css或者js的方法把各列高度设置为最高列的高度.这里我们介绍纯css实现方法. 程序代码: <div id="container"> <div class="col"> <img src="trend.png"> <h1>Trend</h

C#基于NPOI生成具有精确列宽行高的Excel文件的方法

本文实例讲述了C#基于NPOI生成具有精确列宽行高的Excel文件的方法,是非常具有实用价值的技巧分享给大家供大家参考.具体方法如下:. 一.前言 NPOI是操作Excel的神器,导出导入快如闪电, 但是SetColumnWidth函数个人感觉不会用,怎么弄都无法控制好,因为他是以字符数量去设置宽度,实际上Excel列宽还有个像素的概念,更难搞懂了. //附带SetColumnWidth的用法和注释 IWorkbook hssfworkbook = new HSSFWorkbook(); ISh

转载:CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo

CSS等高布局的6种方式

目录 [1]边框模拟[2]负margin[3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及table实现.absolute实现.flex实现和js判断这四种真等高布局 伪等高 边框模拟 因为元素边框和元素高度始终是相同高度,用元素的边框颜色来伪装左右两个兄弟元素的背景色.然后将左右两个透明背景

两列布局:6种方法

面试过程中总会文档两列布局,左边等宽,右边自适应几种方法?以下提供6种为君解忧 <div id="wrap"> <div id="left"></div> <div id="right"></div> </div> 需求就是左侧定宽,右侧自适应.(height先不用管) 方法一:双inline-block #wrap{ width: 100%; font-size: 0; }

css实现三栏布局的几种方法及优缺点

三栏布局,顾名思义就是两边固定,中间自适应. 三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 我们不妨假定这样一个布局:高度已知,其中左栏.右栏宽度各为300px,中间自适应,可以通过几种方法来实现?以及各自的优缺点是什么? 一.浮动布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l