多列布局

多列布局

两列布局，一列定宽，另一列自适应

1、float + margin

<style>
    .content{
        width:150px;
        height:50px;
        border:3px solid #000;
    }
    .left{
        width:50px;
        height:50px;
        float:left;
        background-color:blue;
    }
    .right{
        margin-left:50px;
        height:50px;
        background-color:red;
    }
</style>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

2、margin设置负值解决

<style>
    .content{
        width:150px;
        height:50px;
        border:3px solid #000;
    }
    .left{
        width:50px;
        height:50px;
        float:left;
        background-color:blue;
    }
    .right{
        width:100%;
        margin-left:-50px;
        float:right;
        height:50px;
        background-color:red;
    }
</style>
<div class="content">
    <div class="right"></div>
    <div class="left"></div>
</div>

3、padding + position 解决

<style>
    .content {
        width:100px;
        padding-left:50px;
        position:relative;
        height:50px;
        border:3px solid #000;
    }
    .left{
        width:50px;
        height:50px;
        background-color:blue;
        position:absolute;
        left:0;
        top:0;
    }
    .right{
        width:100%;
        height:50px;
        background-color:red;
    }
</style>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

4、使用flex

<style>
    .content {
        width:150px;
        height:50px;
        border:3px solid #000;
        display:flex;
    }
    .left{
        width:50px;
        height:50px;
        background-color:blue;
    }
    .right{
        flex:1;
        background-color:red;
    }
</style>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

5、使用table

<style>
    .content {
        width:150px;
        height:50px;
        border:3px solid #000;
        display:table;
        table-layout:fixed
    }
    .left{
        width:50px;
        background-color:blue;
        display:table-cell;
    }
    .right {
        background-color:red;
        display:table-cell;
    }
</style>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

右列定宽，左列自适应；两列定宽，一列自适应；两侧定宽，中栏自适应等定宽+自适应的布局原理以上述一致！