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

作者: 岚平果 | 来源:发表于2021-09-18 14:32 被阅读0次

中间定宽，两边自适应布局的三种实现方法
圣杯布局和双飞翼布局的区别与实现
css三栏布局
jichu
关于圣杯布局——浮动&负margin以及calc
三栏布局：圣杯、双飞翼、flex、栅格
CSS + CSS3
三种方式实现圣杯布局
CSS三列布局（两边定宽中间自适应）
CSS面试常问的题型

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

1. 浮动加定位

<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>


<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>

1. calc计算法

<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>

<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>

1. 弹性盒子法

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


<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>