純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