中间固定 左右自适应 css写法

html:
<div class="container">
    <div class="left">
         <div class="left-container">

         </div>
    </div>
    <div class="center">

    </div>
    <div class="right">
        <div class="right-container">

        </div>
    </div>
</div>

css:

<style>
    .container{
        position: absolute;
        top:0;
        bottom: 0;
        left:0;
        right:0;
    }
    .center{
        position: absolute;
        width: 200px;
        height: 100%;
        left:50%;
        margin-left: -100px;
        z-index: 100;
        background-color: red;
    }
    .left{
        position: absolute;
        top:0;
        bottom: 0;
        left:0;
        width: 50%;
    }
    .right{
        position: absolute;
        top:0;
        bottom: 0;
        right:0;
        width: 50%;
    }
    .left-container{
        margin-right: 100px;
        background-color: #00a854;
        height: 100%;
    }
    .right-container{
        margin-left: 100px;
        background-color: #ca900e;
        height: 100%;
    }
</style>

猜你喜欢

转载自blog.csdn.net/Chou_Junn/article/details/84485619
今日推荐