多列等高布局的实现

前言

很久没写过这种等高布局实现了，来重温一下经典。

两栏布局，高度相等，高度由最高的内容撑开，左右两边高度不固定。

固定html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="high">
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </div>
        <div class="low">
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </div>
    </div>
</body>

</html>

实现思路：外层容器使用flex布局，内部子元素不写高度，但是都加上overflow:hidden;便可以实现。

<style>
        .box {
            display: flex;
        }
        .high {
            width: 300px;
            background: red;
            overflow: hidden;
        }
        .low {
            flex: 1;
            overflow: hidden;
            background: blue;
        }
</style>

还有一种利用父级元素display: table，子元素display: table-cell也可以实现类似效果。

        .box {
            display: table;
        }

        .high,
        .low {
            display: table-cell;
        }

        .high {
            background: red;
        }

        .low {
            background: blue;
        }

使用grid布局来实现

        .box {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .high {
            background: red;
        }

        .low {
            background: blue;
        }

效果图(通过拉伸textarea的高度来改变容易高度)

__EOF__

本文作者：风行者夜色
本文链接：https://www.cnblogs.com/aloneMing/p/17329130.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！