一、前言
三列等高布局可能是我们平时开发中用的比较多的布局, 因为有时为了美观必须让三列等高, 但是我们的div又是被内容撑开的, 不能提前设置高度, 这时候就需要我们利用一些骚操作。不过在flex布局出来以后, 这个问题就变得很简单了, 我们后面再介绍。
二、margin+padding实现
首先我们先来看一下最后的效果:
左边两列都会自动和第三列对齐, 下面我们一步步来实现。
首先很自然的, 既然要三个div并列, 我们先给他设置float:left, 并分别给他们一定的宽度和不同的背景色, 但是我们不给他们高度，因为要靠内容撑开。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
float: left;
width: 30%;
background-color: red;
}
.two {
float: left;
width: 30%;
background-color: blue;
}
.three {
float: left;
width: 40%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</div>
<div class="two">
<p>wjaeifojawi</p>
</div>
<div class="three">
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
</div>
</body>
</html>
这时候的效果是这样的:
现在我们要想办法让左边两列的高度都跟第三列一样。我们首先可以想一种思路: 利用js获取到第三列的高度, 然后将第一列第二列的高度变成和它一样。这样的确可以实现，但是这里我们介绍另一种方法，我们让他们看起来高度一样，为什么说是看起来？我们知道，padding是有背景色的，如果我们把三列的padding设置的非常大, 大到肯定可以包括内容。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
float: left;
width: 30%;
background-color: red;
padding-bottom: 1999px;
}
.two {
float: left;
width: 30%;
background-color: blue;
padding-bottom: 1999px;
}
.three {
float: left;
width: 40%;
background-color: yellow;
padding-bottom: 1999px;
}
</style>
</head>
<body>
<div class="one">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</div>
<div class="two">
<p>wjaeifojawi</p>
</div>
<div class="three">
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
</div>
</body>
</html>
这样看起来是不是和我们要的效果很像了，现在的问题就是虽然已经包括的全部内容，但是它太长了，还有一部分是我不想要的，那我就要想办法把它裁掉。这里我们用一个巧妙的办法，先设置margin-bottom为对应的负值, 这样把div实际计算边界变回原来的值。最后再给三列的外层套一个div，高度由三列撑开，超出内容部分隐藏。这样，多处来的部分就被我们裁剪掉了。同时，因为padding的存在，高度不够的两列靠padding将背景色加上去了，这样就看起来高度一样了。修改后的代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
float: left;
width: 30%;
background-color: red;
padding-bottom: 1999px;
margin-bottom: -1999px;
}
.two {
float: left;
width: 30%;
background-color: blue;
padding-bottom: 1999px;
margin-bottom: -1999px;
}
.three {
float: left;
width: 40%;
background-color: yellow;
padding-bottom: 1999px;
margin-bottom: -1999px;
}
#main {
overflow: hidden;
}
</style>
</head>
<body>
<div id="main">
<div class="one">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</div>
<div class="two">
<p>wjaeifojawi</p>
</div>
<div class="three">
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
</div>
</div>
</body>
</html>
这样就达到了我们最开始的效果。当div内容增加的时候，就会减少padding的值，增加height的值，但是显示的高度永远是三列最高的高度，大家可以自己去理解一下。
三、flex实现
上面这种方法是不是感觉很绕，没关系，flex布局出来以后我们有了一个非常好的解决方案，只需要加一行代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
width: 30%;
background-color: red;
}
.two {
width: 30%;
background-color: blue;
}
.three {
width: 40%;
background-color: yellow;
}
#main {
display: flex;
}
</style>
</head>
<body>
<div id="main">
<div class="one">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</div>
<div class="two">
<p>wjaeifojawi</p>
</div>
<div class="three">
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
<p>fwefwe</p>
</div>
</div>
</body>
</html>
这样达到的效果和上面一样。这是为什么呢？因为flex布局中，主轴默认是x轴，所以div会并排，同时在副轴上，如果不指定排列方式，默认是stretch，就是把div的高度拉伸到和父div一样，也就意味着三列等高了。还不理解的同学可以去阮一峰大佬的教程上仔细看看felx的用法。
四、结语
好了，这就是本文的内容了，其实理解了之后还是很容易实现这个效果的，不懂的同学自己尝试着去实现一下相信很快也能够理解了。
