首页 > 代码库 > 中间定宽，两边自适应布局的三种实现方法

中间定宽，两边自适应布局的三种实现方法

2024-09-07 14:03:58   219人阅读

中间定宽，两边自适应布局的三种实现方法

1. 浮动加定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间定宽，两边自适应</title>
    <style type="text/css">
    html,body,div{
        height: 100%;
    }
    .parent{
        position: relative;
        overflow: hidden;
    }
    .left{
        float: left;
        width: 50%; 
        margin-left: -150px;
        background-color: red;
    }
    .right{
         float: right;
        width: 50%; 
        margin-right: -150px;
        background-color: yellow;
    }
    .center{
        position: absolute;
        left:50%;
        transform:translateX(-50%);
        width: 300px;
        background-color: green;
    }
    .left .item{
        margin-left: 150px;
    }   
    .right .item{
        margin-right: 150px;
    }   
    </style>

</head>
<body>
    <div class="parent">
    <div class="left">
        <div class="item"></div>
    </div>
    <div class="right">
        <div class="item"></div>
    </div>
    <div class="center">
        <div class="item"></div>
    </div>

    </div>
</body>
</html>

2. calc计算法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间定宽，两边自适应</title>
    <style type="text/css">
    html,body,div{
        height: 100%;
    }
    .left{
        width: calc(50% - 150px);
        float: left;
        background-color: red;
    }
    .right{
        width: calc(50% - 150px);
        float: right;
        background-color: yellow;
    }
    .center{
        width: 300px;
        float: left;
        background-color: green;
    }
/*也可以将这三个div设置成display:inline-block,这样就不浮动了*/
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>
</html>

3. 弹性盒子法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间定宽，两边自适应</title>
    <style type="text/css">
    html,body,div{
        height: 100%;
    }
    .parent{
        display: flex;
    }
    .left{
        flex:1;
        background-color: red;
    }
    .right{
        flex:1;
        background-color: yellow;
    }
    .center{
       
        width: 300px;
        background-color: green;
    }

    </style>
</head>
<body>
    <div class="parent">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    </div>
</body>
</html>

中间定宽，两边自适应布局的三种实现方法


联系
我们