多列等高布局

最新推荐文章于 2020-02-19 20:50:48 发布

doomliu

最新推荐文章于 2020-02-19 20:50:48 发布

阅读量328

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_38652603/article/details/77413461

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.背景

多列等高布局在很多场景下都会用到（新闻栏，面试，等等）。这里介绍一个主流的方案。

在多列的布局中，包含块的高度是被内部的内容撑起来的，其高度是各个列中最高的那个，那么如何让较低的块也能到达最高的高度呢？请看下面的代码和说明

2.代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>多列等高布局</title>
<style>
body{ 
    padding:0;
    margin:0;
    color:#f00;
}
.container{ 
    margin:0 auto; 
    width:300px; 
    border:3px solid #00C;
    overflow:hidden;
}
.left{ 
    float:left; 
    width:150px; 
    background:#B0B0B0;
    padding-bottom:2000px;
    margin-bottom:-2000px;
}
.right{ 
    float:left; 
    width:150px; 
    background:#6CC;
    padding-bottom:2000px;
    margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">left</div>
    <div class="right">right right right right right right right right right right right right right right right right right right right right right right right right right right right</div>
</div>
</body>
</html>

3.说明

在这个布局中，关键就是.container的overflow 和 .left、.right的padding-bottom & margin-bottom样式。当我们把.left、.right的padding-bottom设置很大时，这两个块自然后向下延展很长，然后我们设置了margin-bottom为相应的负值，这个设置完后，.left和.right依然向下延展很长。那么我们为什么要这么设置呢？是因为.container 的overflow:hidden生效时，会计算其中每个块的高度，这个高度计算时会将margin-bottom和padding-bottom加到一起，（再加上padding-top、height、margin-top）。这样的话，就和我们没有为.left、.right设置margin-bottom和padding-bottom一样了。由于这个原因，既可以让外部元素.container的高度为其中多列的最高列高度，也可以让里面的每个列延伸到和最高列相等的高度。