三列等高布局实现

buuug
1,321 阅读7分钟

一、前言

  三列等高布局可能是我们平时开发中用的比较多的布局, 因为有时为了美观必须让三列等高, 但是我们的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的用法。

四、结语

  好了，这就是本文的内容了，其实理解了之后还是很容易实现这个效果的，不懂的同学自己尝试着去实现一下相信很快也能够理解了。

avatar
文章
阅读
粉丝