常見的面試問題：【CSS】已知高度，寫出三欄佈局

---

問題：

已知高度，寫出三欄佈局，其中左右兩欄寬度各位200px，中間自適應

回答：效果示例

解決方案（1）浮動；（2）絕對定位；（3）彈性佈局；（4）表格佈局；（5）網格佈局。

拓展問題：

（1）每一個解決方案的優缺點
（2）他們之間的比較，假設高度去掉，那種方法還能適用或者不適用
（3）解決方案的兼容性，哪一個更適用在實際項目中

拓展回答：

（1）
A：缺點：浮動脫離文檔流，因此使用的時候要清除浮動；優勢：兼容性比較好
B：缺點：絕對定位佈局脫離文檔，它的子元素也會脫離文檔流；優勢：使用快捷，不容易出現問題，兼容性也比較好
C：彈性佈局是爲了解決上述問題出現的，比較完美的一個
D：表格佈局比較繁瑣，不利於SEO優化；表格佈局兼容性比較好，IE8不支持flex，但支持表格。當其中的一個單元格超出的，兩側單元格也會同時增高，根據場景決定。
E：網格佈局做爲一個新技術，能夠實現不少複雜的佈局，代碼量簡化不少。
（2）
flex佈局和表格佈局。浮動佈局由於左側有遮擋，因此沒有超出的文本會在中間出現，超出部分沒有遮擋會再左側出現。

變通：

三欄佈局	兩欄佈局
左右寬度固定，中間自適應	左寬度固定，右自適應
上下高度固定，中間自適應	右寬度固定，左自適應
/	上高度固定，下自適應
/	下高度固定，上自適應

公共樣式：

設置大小盒子的高度爲 100px，左右（left 和 right）的 div 寬度固定爲 200px, 並分別給三個盒子設置不一樣顏色用來區分。

* {
    padding: 0;
    margin: 0;
}
.layout {
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.layout div {
    height: 100px;
}
.layout .left {
    width: 200px;
    background-color: blue;
}
.layout .center {
    background-color: yellow;
}
.layout .right { 
    width: 200px;
    background-color: red;
}

（1）方案一：浮動

center 的 div 須要放到後面（其他方案都不須要更改 Html 順序），對左右 div 使用 float:left 和 float：right，float 使左右兩個元素脫離文檔流，中間的正常文檔流中。

.float .left {
    float: left;
}   
.float .right {
    float: right;
}

<section class="layout">
    <article class="float">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>

（2）方案二：絕對定位

將 left、right 和 center 的 div 都設置 absolute 脫離文檔流，給 center 的 div 設置左右兩邊距離 200px (即左右兩邊盒子的實際寬度)。

.absolute div {
    position: absolute;
}
.absolute .left {
    left: 0;
}
.absolute .center {
    left: 200px;
    right: 200px;
}
.absolute .right {
    right: 0;
}

<section class="layout">
    <article class="absolute">
        <div class="left"></div>
        <div class="center">absolute</div>
        <div class="right"></div>
    </article>
</section>

（3）方案三：彈性佈局

設置大盒子爲 display: flex;，給 center 的 div 設置 flex: 1，除去左右盒子的寬度外剩餘寬度是 center 的寬度。

.flexbox {
    display: flex;
}
.center {
    flex: 1;
}

（4）方案四：表格佈局

設置大盒子爲 display: table;，將 left、right 和 center 的 div 都設置 display: table-cell 。

.table {
    width: 100%;
    display: table;
}
.table div{
    display: table-cell;
}

（5）方案五：網格佈局

就給大盒子設置屬性。

.grid {
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 200px auto 200px;
}

更多文章分享：https://www.artroy.com.cn/