为你总结老生常谈的 --- 纯CSS三列布局

哈罗，我这只菜鸟又来了。今天总结一下工作中经常用到的布局模式：三列布局。

其实不管是哪种布局都好，只要掌握好CSS，掌握好JS，做起来都不会一头雾水。

当然啦，神一样的布局需要神一般熟练的前端知识，努力一点奋斗一点，总有一天会超神。

最近看到院子里一位同学嚷嚷两年内成为优秀的前端工程师，深深佩服其自信，小弟也得向他看齐。

好了吐槽完毕，送上干货。

一、正文

布局前，通常需要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便偏移到屏幕的右侧

 

4.满屏三列布局(use position:absolute & relative)

html code:

    <div id="header">
        <p>The Header</p>
    </div>
    <div id="divContent">
        <div id="left">
            <p class="top">The Body Left</p>
        </div>
        <div class="content">
            <p>The body Center</p>
        </div>
        <div id="right">
            <p class="top">The body Right</p>
        </div>
    </div>
    <div class="divBottom">The  Bottom</div>

css code:

    /*利用相对定位和绝对定位进行三列布局*/
    #header 
    {
        height: 50px;
        background-color: #EAEAEA;
        border:1px solid #333;
        padding:4px;
        margin-top: 30px;
    }
    #divContent 
    {
        /*key code:相对定位后，其子元素均相对该元素进行定位*/
        position:relative;
        width:100%;
        /*设置width可以有多种值，视乎需求，这里设置100%的话就会自适应浏览器窗口大小*/
    }
    #left
    {
        position:absolute;  /*1.绝对定位，绝对定位后相对于static外的第一个父元素定位*/
        left:0;/*2.左列就写left:0，这样它就靠在最左边，右列就如下方写right:0，这样它就靠在最右边*/
        top:30px;
        width:200px;
        background:#eaeaea;
        border:1px solid #333;
    }
    .content 
    {
        position:relative; /*1.中间这块并没有使用绝对定位，而是用了相对定位,这样它就相对于原位置定位了*/
        top: 30px;
        margin-left:220px;/*2.margin-left和margin-right的设置要视乎左列和右列的宽度*/
        margin-right:220px;
        margin-bottom:20px;
        background:#ffc;
        border:1px solid #333;
    }
    #right 
    {
        position:absolute;
        right:0;
        top: 30px;
        width:200px;
        background:#eaeaea;
        border:1px solid #333;
    }
    .divBottom 
    {
        background-color:#f1f1f1;
        border:1px solid #333;
        width:100%;
        position:absolute;
        bottom:0;
    }

key:熟练使用相对定位及绝对定位

 

二、总结

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

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

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

共勉。