等高布局的几种实现

今天去 58 面试的时候,问到了一个等高布局的问题,让我用更多方式实现的时候,没有答上来。所以回来之后百度并且尝试一番,总结在这里供大家参考。

padding 补偿法

常用方式,兼容性良好。先看没有等高布局的情况:

HTML 代码

1
2
3
4
<div class="eq1 cf">
<div class="fl">这里是 left。</div>
<div class="fr">这里是 right。<br /><br /><br />比左边高,所以左边底部出现脱节现象。</div>
</div>

CSS 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
.eq1 {
width: 500px;
margin: 20px auto;
border: 5px solid #f00;
}
.eq1 .fl {
width: 200px;
background-color: #0f0;
}
.eq1 .fr {
width: 300px;
background-color: #00f;
}

展示结果

增加 padding 补偿,就是给要等高的元素增加很大一个 padding-bottom,再增加一个负 margin-bottom 让元素的底部回到原来的位置。

div.fl div.fr 增加 .eqh 样式:

1
2
3
4
.eqh {
padding-bottom: 200px;
margin-bottom: -200px;
}

展示结果

其实大家可以看到,并不是真正的等高,而是实现一个障眼法,让他看起来等高。关于值的大小,可以根据项目需要,或者直接设置一个很大的值也可以。

这时只要给 .eq1 增加 overflow: hidden;,隐藏掉超出的部分就可以了。

最终代码和展示,点此查看 DEMO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等高布局的几种实现 | 王海达博客</title>
<style type="text/css">
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.fl { float: left; }
.fr { float: right; }
.eq1 {
width: 500px;
margin: 20px auto;
border: 5px solid #f00;
overflow: hidden;
}
.eq1 .fl {
width: 200px;
background-color: #0f0;
}
.eq1 .fr {
width: 300px;
background-color: #00f;
}
.eqh {
padding-bottom: 200px;
margin-bottom: -200px;
}
</style>
</head>
<body>
<div class="eq1 cf">
<div class="fl eqh">这里是 left。</div>
<div class="fr eqh">这里是 right。<br /><br /><br />比左边高,所以左边底部出现脱节现象。</div>
</div>
</body>
</html>

注意:因为父级 overflow: hidden,所以如果有其他元素定位到父级之外的地方,可能不会显示。

背景假象法

这种方式简单,兼容性也良好,就是如果每次换宽度和背景颜色都需要重新制作背景图。

首先,你需要准备一张如下的背景图:

在列的父级元素上使用这个背景图进行 Y 轴的铺放,从而实现等高的假象。

HTML 代码

1
2
3
4
<div class="eq2 cf">
<div class="fl">这里是 left。</div>
<div class="fr">这里是 right。<br /><br /><br />比左边高,所以左边底部出现脱节现象。</div>
</div>

CSS 代码

1
2
3
4
5
6
7
8
9
10
11
12
.eq2 {
width: 500px;
margin: 20px auto;
border: 5px solid #f00;
background: url('img/bg2.jpg') repeat-y;
}
.eq2 .fl {
width: 200px;
}
.eq2 .fr {
width: 300px;
}

最终代码和展示,点此查看 DEMO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等高布局的几种实现 | 王海达博客</title>
<style type="text/css">
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.fl { float: left; }
.fr { float: right; }
.eq2 {
width: 500px;
margin: 20px auto;
border: 5px solid #f00;
background: url('img/bg2.jpg') repeat-y;
}
.eq2 .fl {
width: 200px;
}
.eq2 .fr {
width: 300px;
}
</style>
</head>
<body>
<div class="eq2 cf">
<div class="fl">这里是 left。</div>
<div class="fr">这里是 right。<br /><br /><br />比左边高,所以左边底部出现脱节现象。</div>
</div>
</body>
</html>

JavaScript 动态计算法

此方法通过 JS 计算传入 div 的最高高度,循环设置所有 div 的高度来实现等高。

HTML 代码

1
2
3
4
<div class="eq3 cf">
<div class="fl col">这里是 left。</div>
<div class="fr col">这里是 right。<br /><br /><br />比左边高,所以左边底部出现脱节现象。</div>
</div>

CSS 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
.eq3 {
width: 500px;
margin: 20px auto;
border: 5px solid #f00;
}
.eq3 .fl {
width: 200px;
background-color: #0f0;
}
.eq3 .fr {
width: 300px;
background-color: #00f;
}

JS 代码

1
2
3
4
5
6
7
8
9
10
11
function maxHeight(classname) {
var divs = document.querySelectorAll('.' + classname);
var maxh = 0;
for (var i = 0; i < divs.length; i++) {
maxh = Math.max(divs[i].offsetHeight, maxh);
}
for (var i = 0; i < divs.length; i++) {
divs[i].style.height = maxh + 'px';
}
}
maxHeight('col');

最终代码和展示,点此查看 DEMO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等高布局的几种实现 | 王海达博客</title>
<style type="text/css">
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.fl { float: left; }
.fr { float: right; }
.eq3 {
width: 500px;
margin: 20px auto;
border: 5px solid #f00;
}
.eq3 .fl {
width: 200px;
background-color: #0f0;
}
.eq3 .fr {
width: 300px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="eq3 cf">
<div class="fl col">这里是 left。</div>
<div class="fr col">这里是 right。<br /><br /><br />比左边高,所以左边底部出现脱节现象。</div>
</div>
<script type="text/javascript">
function maxHeight(classname) {
var divs = document.querySelectorAll('.' + classname);
var maxh = 0;
for (var i = 0; i < divs.length; i++) {
maxh = Math.max(divs[i].offsetHeight, maxh);
}
for (var i = 0; i < divs.length; i++) {
divs[i].style.height = maxh + 'px';
}
}
maxHeight('col');
</script>
</body>
</html>

参考资料:
八种创建等高列布局
CSS布局奇淫技巧之-多列等高

坚持原创技术分享,您的支持将鼓励我继续创作!