纯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