多列布局的处理方式

布局一

左边一列固定宽度，右边一列自适应

<div class="box">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

• 方式一: float & margin

.left {
    float: left;
    width: 100px;
}
.right {
    margin-left: 120px;
}

• 方式二: float & overflow:hidden

.left {
    float: left;
    width: 100px;
    margin-right: 10px;
}
.right {
    overflow: hidden;
}

• 方式三: table

.box {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 100px;
}
.right {
    padding-left: 20px;
}

• 方式四： flex

.box {
    display: flex;
}
.left {
    width: 100px;
}
.right {
    flex:1;
    margin-left: 20px;
}

• 方式五： calc

.box {
    display: flex;
}
.left {
    width: 100px;
    margin-right: 20px;
}
.right {
    width: calc(100% - 100px);
}

布局二

左边多列定宽，右边一列自适应

实现方式：（其实就是同布局一，只是将中间多列与最左边的处理方式一样）

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

• 方式一: float & margin

.left,.center{
    float: left;
    width: 100px;
}
.right {
    margin-left: 120px;
}

• 方式二: float & overflow:hidden

.left,.center {
    float: left;
    width: 100px;
    margin-right: 10px;
}
.right {
    overflow: hidden;
}

• 方式三: table

.box {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.left,.center, .right {
    display: table-cell;
}
.left,.center {
    width: 100px;
}
.right {
    padding-left: 20px;
}

• 方式四: flex

.box {
    display: flex;
}
.left,.center {
    width: 100px;
}
.right {
    flex:1;
    margin-left: 20px;
}

• 方式五: calc

.box {
    display: flex;
}
.left,.center {
    width: 100px;
    margin-right: 20px;
}
.right {
    width: calc(100% - 240px);
}

布局三

左边一列不定宽，右边一列自适应

实现方式：同布局一，只不过将左边一列的特殊处理

• 方式一：将左边一列的width去掉
• 方式二：将左边一列的width去掉
• 方式三：将table-layout: fixed;去掉,并给左边一列一个极小值1px或者0.1%

.box {
    width: 100%;
    display: table;
}
.left,.center, .right {
    display: table-cell;
}
.left,.center {
    width: 1px;
}
.right {
    padding-left: 20px;
}

• 方式四：将左边一列的width去掉

布局四

等宽布局，这里就需要计算了

方式一： float && border-box

.box {
    margin-left: -10px;
}
.left,.center,.center0,.right {
    float: left;
    width: 25%;
    padding-left: 10px;
    box-sizing: border-box;
}

方式二： table

<div class="box">
    <div class="table">
        <div class="left">
            left111
        </div>
        <div class="center">
            center
        </div>
        <div class="center0">
            center
        </div>
        <div class="right">
            right
            <p>111</p>
        </div>
    </div>
</div>

.box {
    margin-left: -10px;
}
.table {
    display: table;
    width: 100%;
    table-layout: fixed; // 布局优先
}
.left,.center,.center0,.right {
    display: table-cell;
    padding-left: 10px;
}

方式三： flex

.box {
    display: flex;
}
.left,.center,.center0,.right {
    flex: 1;
    margin-left:10px;
}

布局五

等高布局

布局一中的方式三，方式四其实都已经是等高布局了

注意：table 布局中：

.left {
    width: 100px;
    /*保证间距与内容背景色不一样*/
    border-right: 20px solid transparent;
    background-clip: padding-box;
}

方式二：可以实现伪等高

.box {
    overflow: hidden;
}
.left,.right {
    padding-bottom: 9999px;
    margin-bottom:-9999px;
}

布局六

双飞燕布局（玉伯）,详细分析见 这里

// html
<div class="wrap">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

/*css*/
.main,.left,.right {
    float: left;
}
.main {
    width: 100%;
    /*这里也可以在main里面在加一个div,设置其margin:0 300px 0 200px;*/
    padding: 0 300px 0 200px;
    box-sizing: border-box;
}
.left {
    width: 200px;
    margin-left: -100%;
}
.right {
    width: 300px;
    margin-left: -300px;
}

---

由课程资源整理，如有雷同，纯属资源来源一致！