如何实现左右两栏一定比例，左栏高度随右栏高度自适应？

程序员文章站 2024-02-28 19:12:16

...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现左右两栏一定比例，左栏高度随右栏高度自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            width: 400px;
        }
        .container .left {
            width: 20%;
            background-color: pink;
        }
        .container .right {
            width: 80%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左栏</div>
        <div class="right">右栏右栏右栏右栏右栏右栏右栏
        右栏右栏右栏右栏右栏v右栏右栏右栏右栏右栏右栏右栏右栏</div>
    </div>
</body>
</html>

效果：
如何实现左右两栏一定比例，左栏高度随右栏高度自适应？

父元素固定宽度400px，添加flex属性，子元素从左至右一行显示；
左栏宽度占父元素宽度的20%，右栏宽度占父元素宽度的80%；
由于父元素没有设置高度，右栏高度 > 左栏高度，此时父元素高度被右栏元素撑开。