三列布局，中间自适应

百度经验：http://jingyan.baidu.com/article/fdffd1f826fa46f3e88ca17c.html

1.三列等高布局

html code:

<div id="wrap">
    <div id="left">
        <p>left</p>
        <p>left</p>
        <p>left</p>
        <p>left</p>
        <p>left</p>
    </div>
    <div id="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div id="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>

css code:

#wrap
{
    width: 1000px;
    margin: 0 auto; /*key code:*/
    overflow: hidden;
}
#left, #center, #right
{
    /*key code:*/
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
#left
{
    background: #00FFFF;
    float: left;
    width: 250px;
}
#center
{
    background: #FF0000;
    float: left;
    width: 500px;
}
#right
{
    background: #00FF00;
    float: right;
    width: 250px;
}

key:采用overflow:hidden,正内边距和负外边距结合

2.三列满屏布局(use display:inline-block)

html code:

<div class="sec">
    <div class="content">
        <div class="subMenuLeft">left</div>
        <div class="mainBoxCenter">center</div>
        <div class="infoRight">right</div>
    </div>
</div>

css code:

.sec div.content
{
    padding-left: 150px;
    padding-right: 300px;
}
.sec div.subMenuLeft, .sec div.mainBoxCenter, .sec div.infoRight
{
    display: inline-block;
    zoom: 1;
    display: inline; /*fix ie<8*/
}
.sec div.mainBoxCenter
{
    width: 100%;
    background: #00FFFF;
}
.sec div.subMenuLeft
{
    width: 150px;
    margin-left: -150px;
    background: #FF0000;
}
.sec div.infoRight
{
    width: 300px;
    margin-right: -300px;
    background: #00FF00;
}

key:使用display:inline-block，然后控制padding和margin

explaination:

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

　　但在IE6.0以及IE7.0是使用了一个has layout的概念。使用display：inline-block仅仅触发了块状元素的has layout属性。而DIV本身就是块状元素，所以在IE<8.0 下依然会出现换行的情况。

　　解决方案：先将块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout去hack IE7.0-

　　div{display:inline-block;zoom:1;*display:inline;}

3.三列满屏布局(use float & -margin)

html code:

<div class="thr">
    <div class="content">
        <div class="mainBoxCenter">center</div>
    </div>
    <div class="subMenuLeft">left</div>
    <div class="infoRight">right</div>
</div>

css code:

.thr div.content
{
    width: 100%;
    float: left;
}
.thr div.subMenuLeft, .thr div.infoRight
{
    float: left;
}
.thr div.subMenuLeft
{
    width: 150px;
    margin-left: -100%;
    background: #00FFFF;
}
.thr div.infoRight
{
    width: 200px;
    margin-left: -200px;
    background: #FF0000;
}
.thr div.mainBoxCenter
{
    margin-left: 150px;
    margin-right: 200px;
    background: #00FF00;
}

key:利用浮动，再通过负的margin-left值控制位置

explaination:

1.设置三个div全部向左浮动

2.设置content的宽度为100%，充满整行，此时left和right都被挤到下一行

3.设置left的margin-left:-100%;这样left偏移到屏幕的最左方并消失

4.设置mainCenter的左外边距以及右外边距分别等于要显示的left和right的宽度，相当于留出位置放置left和right，此时会看到left出现了

5.设置right的margin-left值为自身的宽度，这样right便偏移到屏幕的右侧

二、总结

以上布局均兼容所有主流浏览器，包括IE6+