css两栏布局（一边定宽，一边自适应）

html:代码

<body>
    <div class="header">header</div>
    <div class="box">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

1）float

    *{
        margin: 0;
        padding: 0;

    }
    .box{
        overflow: hidden;
    }
    .header,.footer{
        background-color: skyblue;
        height: 50px;
    }
    .left{
        height: 400px;
        background-color: blue;
        margin-right: 300px;
    }
    .right{
        float: right;
        width: 300px;
        height: 400px;
        background-color: pink;
    }

2）定位   

 

    *{

        margin: 0;
        padding: 0;

    }
    .box{
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .header,.footer{
        background-color: skyblue;
        height: 50px;
    }
    .left{
        background-color: blue;
        height: 200px;
        position: absolute;
        width: 200px;
    }
    .right{
        height: 200px;
        margin-left: 200px;
        background-color: pink;

    }

 

3）使用calc函数

    *{
        margin: 0;
        padding: 0;

    }
    .box{
        overflow: hidden;
        /* width: 100%; */
    }
    .header,.footer{
        background-color: skyblue;
        height: 50px;
    }
    .left{
        background-color: blue;
        height: 200px;
        float: left;
        width: 300px;
    }
    .right{
        height: 200px;
        float: left;
        background-color: pink;
        width: calc(100% - 300px);
    }

注意使用calc函数时，运算符前后都要有空格

 

 

posted @ 2021-09-08 21:27  Allalms  阅读(53)  评论(0)    收藏  举报