布局是面試中常問的問題，尤其是這類的題目，怎么答才好呢？
大多數人的第一個方法是浮動，沒錯，浮動。第二個方法呢？你回答定位，沒錯。第三個方法呢？.... 第四個方法呢？第五個方法呢？....
其實能想起來兩個方法的人，這道題已經不及格了。所以呀，我來說幾種方法吧。
隨便多說一點，如果你懂語意化開發並且簡歷中提到，怎么讓面試官知道呢？假如你寫了個界面，全是div，你簡歷中提到的語意化開發在哪呢？你是面試官你會怎么想?
以下代碼用語意化書寫
第一種方法：浮動
最常見的，不說了
<section class="layout float">
<style type="text/css">
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮動解決方案</h2>
1.這是三欄布局中間部分
2.這是三欄布局中間部分
</div>
</article>
</section>
第二種方法：定位
不多說
<section class="layout absolute">
<style type="text/css">
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left: 0px;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right: 0px;
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>絕對定位解決方案</h2>
1.這是三欄布局中間部分
2.這是三欄布局中間部分
</div>
<div class="right"></div>
</article>
</section>
第三中方法：flex布局
其實稍微想一下就能想到這個flex布局，article的display設置為flex，左右div寬度固定，中間div的flex屬性設置為1，讓其自動填充剩下的空間
<section class="layout flexbox">
<style type="text/css">
.layout.flexbox{
margin-top: 140px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解決方案</h2>
1.這是三欄布局中間部分
2.這是三欄布局中間部分
</div>
<div class="right"></div>
</article>
</section>
第四種方法：表格布局
這種方法也不難想到，移動端有了flex這種神器，table-cell就有點落伍了。方法就是將article的display設置成table，article下的所有div的display設置成table-cell，把不需要自適應的div給個寬度就可以了。
順便說以下，table表格中的單元格最大的特點之一就是同一行列表元素都等高，所以等高布局就可以用到了。
代碼在這
<section class="layout table">
<style type="text/css">
.layout.table .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格解決方案</h2>
1.這是三欄布局中間部分
2.這是三欄布局中間部分
</div>
<div class="right"></div>
</article>
</section>
第五種方法：網格布局
這種不太常用，不過用過的同學想起來也不難，既然是網格布局，那就把article的display設置為grid唄，既然是網格，那就要有行和列？既然有行和列，就可以設置行和列的寬高吧？所以這兩個屬性就來了grid-template-rows和grid-template-columns，不懂的可以看看下面的這個文章
http://blog.csdn.net/iefreer/article/details/50544261
<section class="layout grid">
<style type="text/css">
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns:300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>網格解決方案</h2>
1.這是三欄布局中間部分
2.這是三欄布局中間部分
</div>
<div class="right"></div>
</article>
</section>