多列布局的處理方式

佈局一

左邊一列固定寬度，右邊一列自適應

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

---

由課程資源整理，如有雷同，純屬資源來源一致！