526互联

多列等高布局的实现

发布时间 2023-04-18 12:14:34作者: 风行者夜色

前言

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

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

固定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>
  1. 实现思路：外层容器使用flex布局，内部子元素不写高度，但是都加上overflow:hidden;便可以实现。
<style>
        .box {
            display: flex;
        }
        .high {
            width: 300px;
            background: red;
            overflow: hidden;
        }
        .low {
            flex: 1;
            overflow: hidden;
            background: blue;
        }
</style>
  1. 还有一种利用父级元素display: table，子元素display: table-cell也可以实现类似效果。
        .box {
            display: table;
        }

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

        .high {
            background: red;
        }

        .low {
            background: blue;
        }
  1. 使用grid布局来实现
        .box {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .high {
            background: red;
        }

        .low {
            background: blue;
        }

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