双飞翼布局

最新推荐文章于 2025-05-29 22:11:51 发布

a-console.log

最新推荐文章于 2025-05-29 22:11:51 发布

阅读量124

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/m0_56758643/article/details/126610424

版权

使用flex盒子实现

<div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <style>
        .box {
            display: flex;
            height: 300px;
            width: 100%;
        }

        .left {
            background: #f00;
            width: 300px;
        }

        .right {
            background: #f0f;
            width: 300px;
        }

        .center {
            background: #ff0;
            flex: 1 auto;
        }
    </style>

使用浮动实现

 <div class="box">
        <div class="left">a</div>
        <div class="right">b</div>
        <div class="center">v</div>
       
    </div>
    <style>
        .box {
            height: 300px;
            width: 100%;
        }

        .left {
            height: 300px;
            float: left;
            background: #f00;
            width: 300px;
        }

        .right {
            height: 300px;
            background: #f0f;
            float: right;
            width: 300px;
        }

        .center {
            height: 300px;
            background: #ff0;
        }
    </style>

使用定位实现

<div class="box">
        <div class="left">a</div>
        <div class="right">b</div>
        <div class="center">v</div>

    </div>
    <style>
        .box {
            position: relative;
            height: 300px;
            width: 100%;
        }

        .left {
            height: 300px;
            background: #f00;
            width: 300px;
            position: absolute;
            left: 0;
        }

        .right {
            height: 300px;
            background: #f0f;
            position: absolute;
            right: 0;
            width: 300px;
        }

        .center {
            padding:0 300px;
            height: 300px;
            background: #ff0;
        }
    </style>