纯CSS三列布局

一、正文

布局前，通常需要reset CSS，小弟深深喜欢kissy reset，在这里也使用它。至于代码就不附了，各位可以自己下载来参透参透。

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+

文章内个人理解为原创，资料出自网络，对此衷心表示感谢！

如果这篇文章对你的布局工作有帮助，烦请点一点推荐，求写作动力！

共勉。

引用：http://www.cnblogs.com/stay-foolish/archive/2013/05/19/3080200.html