CSS 多列等高的几种实现方式

什么是多列等高

简单的说，就是多个列，但是所有列的高度都希望以最高的那个列为准。

如下图，每个列的高度都靠里面的内容撑起来。

但是有些情况我们需要每个列能与最高的那个列等齐。如下图：

实现

利用 padding、margin 来实现
table 布局实现
flex 布局实现

来直接看看测试代码吧，可以直接复制代码，查看结果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>多列等高</title><style>/* 公共样式 */ul {list-style: none;padding: 0;margin: 0;}ul li {background: #0b88ec;}ul li p {padding: 10px;margin: 0;color: #fff;}/* padding margin 实现样式 */.test-1 ul {overflow: hidden;}.test-1 li {float: left;width: 33.33%;padding-bottom: 9999px;margin: 0 0 -9999px 0;}/* table 实现样式 */.test-2 ul {display: table;}.test-2 li {display: table-cell;width: 33.33%;}/* flex 实现样式 */.test-3 ul {display: box;display: -webkit-flex;display: flex;}.test-3 li {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;width: 0;}</style></head><body><!-- padding margin 实现 --><h3>padding margin 实现:</h3><div class="test-1"><ul><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。</p></li><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。</p></li><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。</p></li></ul></div><!-- table 实现 --><h3>table 实现:</h3><div class="test-2"><ul><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。</p></li><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。</p></li><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。</p></li></ul></div><!-- flex 实现 --><h3>flex 实现:</h3><div class="test-3"><ul><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。</p></li><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。</p></li><li><p>步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。</p></li></ul></div></body>
</html>

总结

个人认为，如果不考虑兼容低版本 ie 浏览器的话，最好采用 flex 布局，因为这种方案最灵活。

CSS 多列等高的几种实现方式相关推荐

css两列等高,css 多列等高
多列等高高度不一的列以等高方式布局. 需求设计师说某页面的新闻介绍,由于新闻内容不同导致显示区域的高度不一致,现需要使其高度视觉上保持一致.小加同学觉得必须迅速解决,让设计师妹妹知道我们程序师哥哥 ...
css水平垂直居中(不定高)的三种方法
<style>.parent{ height:200px;width:200px;border:1px solid #000;}.son{width:100px;background: r ...
常用三种跨行转账方式的用户体验比较
当今移动互联网的时代,在享受实体银行的转账服务外,人们越来越倾向于线上完成银行转账的操作,而支付宝转账和手机银行转账是最常用的两种线上转账方式,加上传统的银行ATM机转账,对于个人用户来说,这三种转账 ...
【Spring AOP(2)篇】原理及两种实现方式（cglibjdk动态代理）
简介: Spring AOP(Aspect-Oriented Programming,面向切面编程)是 Spring 框架的一个重要特性,用于解耦和切割业务逻辑,是实现面向切面编程的重要手段之一.本文 ...
CSS之创建等高列布局之三
4. 使用正padding和负margin对冲实现多列布局方法这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow: ...
CSS之创建等高列布局之一
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
css table布局大法，解决你大部分居中、多列等高、左右布局的问题
看了这篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等 ...
CSS布局——多列等高布局
先看一个案例: 左边是导航部分,右边是详细内容,两者的高度都是不固定的.左边导航栏的内容可能比右边的内容高,反之亦然.但是两者的背景颜色高度始终保持一致! 下面进入正题: 1.利用border实现 & ...
利用CSS的三列等高布局
以前自己都是用JS去处理,原来用CSS也是很方便的,可以少写代码^_^ <html xmlns="http://www.w3.org/1999/xhtml"><h ...

CSS 多列等高的几种实现方式

什么是多列等高

实现

利用 padding、margin 来实现

table 布局实现

flex 布局实现

总结

CSS 多列等高的几种实现方式相关推荐

最新文章

热门文章