div不设高度,由内容撑开,继承兄弟元素的高度案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        .box{
            width: 1000px;
            position: relative;
        }
        .f_cba:after{
            content: "";
            display: block;
            clear: both;
        }
        .f_fr{
            height: 200px;
            width: 200px;
            float: right;
            background-color: red;
        }
        .lbox{
            position: absolute;
            top:0;left: 0;
            width: 200px;
            height: 100%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box f_cba">
        <div class="f_fr">
        </div>
        <div class="lbox">
        </div>
    </div>
</body>
</html>

原文来自:前端div不设高度,由内容撑开,继承兄弟元素的高度案例-蒲公英云 (dandelioncloud.cn)

posted @ 2023-01-03 19:08  ℳℓ马温柔  阅读(174)  评论(0编辑  收藏  举报