学步园

百度面试笔试中有一题是写一个三栏布局，两边固定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