三欄布局（兩邊固定，中間自適應）

百度面試筆試中有一題是寫一個三欄布局，兩邊固定300px，中間自適應。以為自己寫對了，回來后上網才知道原來錯了撒。

我的答案：

1 <div class="left">1</div>
2 <div class="center">2</div>
3 <div class="right">3</div>
4 <style text="type/css">
5 div{display:inline-block;}
6 .left, .right{ width:300px; background:red;}
7 .center{ width:auto;}
8 </style>

 網上答案

http://www.w3cplus.com/css/layout-column-three

主要有定位，浮動和通過margin來控制布局三種方法。同時還給出了一個三欄布局，中間固定，兩邊自適應的例子。

定位：

<div id="left">左邊欄</div>
<div id="right">右邊欄</div>
<div id="main">主內容</div>
html,body {
margin:0;
padding:0;
height: 100%;
}

#left,
#right {
position: absolute;
top:0;
width: 220px;
height: 100%;
}

#left {
left:0;
}

#right {
right:0;
}

#main {
margin: 0 230px;
height: 100%;
}

浮動：

<div id="left">left </div>
<div id="right">right</div>
<div id="main">mian</div>
#left,
#right {
float: left;
width: 220px;
height: 200px;
background: blue;
}
        
#right{
float: right;
}
        
#main {
margin: 0 230px;
background: red;
height: 200px;
}

負邊距：

<div id="main">
<div id="mainContainer">main content</div>
</div>
<div id="left">
<div id="leftContainer" class="inner">left content</div>
</div>
<div id="right">
<div id="rightContainer" class="inner">right</div>
</div>
#main {
float: left;
width: 100%;
}
#mainContainer {
margin: 0 230px;
height: 200px;
background: green;
}
#left {
float: left;
margin-left: -100%;
width: 230px
}
        
#right {
float: left;
margin-left: -230px;
width: 230px;
}
        
#left .inner,
#right .inner {
background: orange;
margin: 0 10px;
height: 200px;
}

中間固定，兩邊自適應：

<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
#left,
#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
}

#main {
width: 540px;
float: left;
background: green;
}
    
.inner {
padding: 20px;
}
    
#left .inner,
#right .inner {
margin: 0 0 0 271px;
background: orange;
}

這種方法如果在ie下會存在布局混亂的bug，你可以將div#right和div#left中的width值稍作修改：

#left,
#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
*width: 49.9%;
}

CSS3 Flexbox

<div class="grid">
  <div class="col fluid">
    ...
  </div>
  <div class="col fixed">
    ...
  </div>
  <div class="col fluid">
    ...
  </div>
</div>
.grid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
}
.col {
  padding: 30px;
}
.fluid {
  flex: 1;
}
.fixed {
  width: 400px;
}

有關flexbox的內容：

http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans