題目：
假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應的設置方案有幾種？
這里考察的是你對CSS的理解
首先初始化樣式
body{
margin:0;
padding:0;
}
HTML編寫
由於三欄布局HTML代碼幾乎差不多，下面就不過多重復編寫了。
<body>
<section>
<h2>三欄布局</h2>
<article class='container1'>
<div class='left'></div>
<div class='center'>
<h3>這是xxx解決方案</h3>
<p>這是三欄布局左右固定中間自適應</p>
</div>
<div class='right'></div>
</article>
</section>
</body>
注： 浮動解決方案需要將.center的類標簽與.right類互換即可。
下面我們將通過修改css樣式來解決布局方案，樣式的container1可根據下面方案自行修改即可。
1.浮動解決方案
.container1 div{min-height: 100px;}
.container1 .left,
.container1 .right{width: 300px;background: #ccc;}
.container1 .left{float: left;}
.container1 .right{float: right;}
.container1 .center{background: palegreen;}
優點： 兼容性比較好；把清除浮動和周邊元素的關系處理好的話。
**缺點： **清除浮動，浮動以后脫離文檔流，處理不好會帶來很多問題，本身的局限性。
2.定位解決方案
.container2{min-height: 100px;position: relative;}
.container2 div{min-height: 100px;position: absolute;}
.container2 .left,
.container2 .right{width: 300px;background: #ccc;}
.container2 .center{background: palegreen;left: 300px;right: 300px;}
.container2 .left{left: 0;}
.container2 .right{right: 0;}
優點： 快捷，配合js使用不容易出問題。
缺點： 布局已經脫離文檔流了，就意味下面所有子元素也必須脫離文檔流，導致了這個方案的可使用性比較差。
3.flex box 解決方案
.container3{display: flex;}
.container3 div{min-height: 100px;}
.container3 .left,
.container3 .right{width: 300px;background: #ccc;}
.container3 .center{flex: 1;background: palegreen}
優點： 解決了上面兩個方案的不足
缺點： IE8及以下不支持 flex
4.表格 table 解決方案
.container4{display: table;width: 100%;min-height: 100px;}
.container4 div{display: table-cell;}
.container4 .left,
.container4 .right{width: 300px;background: #ccc;}
.container4 .center{background: palegreen;}
優點： 輕易的做到，表格兼容性非常好，flex解決不了的（IE8不支持flex），想實現同樣效果可以用表格。
缺點： 歷史的詬病以外，其中某一個單元格的高度超出了的時候，兩側的單元格也是要調整高度的；有時候的場景是不需要同時增高的。
5.新技術 Grid 方案
.container5{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.container5 div{min-height: 100px;}
.container5 .left,
.container5 .right{background-color: palegreen;}
.container5 .center{background-color: #ccc;}
優點： 可以做很多復雜的布局，代碼量也簡化很多，是未來的趨勢；
缺點： 兼容性問題，各種瀏覽器及舊版本支持不是很好。
知識擴展
在業務中的方案根據上面的優缺點來應對需求使用相應的布局方案。筆者考慮到兼容性及其他因素在這里推薦 flex和table倆種方案。
三欄布局上下高度固定
看了上面那么多方案，是否自己也可以手動實現一下三欄上下高度固定，中間自適應
<body>
<section class='flex-layout'>
<h2>7.三欄布局上下固定, 中間自適應:flex box方案</h2>
<article class="three_columns">
<div class="top">上</div>
<div class="middle">
<h1>flex box布局</h1>
</div>
<div class="bottom">下</div>
</article>
</section>
</body>
CSS樣式
.three_columns{
width: 300px;
height: 100%;
display: flex;
flex-direction: column;
margin: 20px;
}
.three_columns .top,
.three_columns .bottom{height: 300px;background: palegreen;}
.three_columns .middle{
flex: 1;
background: #ccc;
overflow: auto;
}
兩欄布局
實現倆欄布局,右邊固定,左邊自適應
<body>
<section>
<h2>6.倆欄布局</h2>
<article class='two-column'>
<div class="left"></div>
<div class="right">
<h3>這是倆欄布局,右邊固定,左邊自適應</h3>
<p>這是倆欄布局,右邊固定,左邊自適應</p>
</div>
</article>
</section>
</body>
CSS樣式
.two-column{display: flex;}
.two-column div{min-height: 100px;}
.two-column .right{width: 400px;background: palegreen;}
.two-column .left{flex:1;background: #ccc}
總結：語義化標簽對SEO更友好。代碼書寫的規范方便后期的維護。
如果你覺得該文章能幫助到你，這里歡迎star小星星。