實(shí)現(xiàn)三列布局相同高度的解決辦法_DIV+CSS實(shí)例
      
編輯Tag賺U幣
      


      教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
      


      


						　　作者: Alan Pearce　原文: Multi-Column Layouts Climb Out of the Box

      　　我們都了解擁有相同高度的布局是很麻煩的事，有很多相關(guān)資料提到過(guò)相關(guān)設(shè)計(jì)方法，所以在這我就不多做解釋了。

      　　最近在研究一個(gè)兩個(gè)欄目的動(dòng)態(tài)布局，每個(gè)欄目背景不同。我馬上想起了Dan Cederholm的Faux Columns，但我仍然需要一個(gè)動(dòng)態(tài)布局的方法。我又看了完美布局的文章One True Layout，但是有很多bug，需要許多注釋和程序。甚至考慮用JavaScrip來(lái)實(shí)現(xiàn)欄目始終保持同一高度，但是不行。絕望之余，幾乎要用table布局，不，一定還有更好的方法。我想著一個(gè)問(wèn)題“盒子外面是什么”，border！假如我可以使“sidebar”（或"rail"）的div相對(duì)與“content”的div浮動(dòng)，就可以實(shí)現(xiàn)多欄目相同高度。這個(gè)方法在很多地方介紹過(guò)：Douglas Livingstone的introduced ，Holly的extended John Bergevin的Position Is Everything。由one true layout的方法發(fā)展而來(lái)，用更簡(jiǎn)潔清楚的代碼 實(shí)現(xiàn)了兩個(gè)欄目的動(dòng)態(tài)變化。

      HTML代碼:

      示例代碼 [www.wf0088.com]
      <div id="container">
        <div id="content">This is<br />some content</div>
        <div id="rail">This is the rail</div>
      </div>

      CSS代碼:

      示例代碼 [www.wf0088.com]
      #container{
        background-color:#0ff;
        overflow:hidden;
        width:750px;
      }
      #content{
        background-color:#0ff;
        width:600px;
        border-right:150px solid #f00; »
        /* The width and color of the rail */
        margin-right:-150px; /* Hat tip to Ryan Brill */
        float:left;
      }
      #rail{
        background-color:#f00;
        width:150px;
        float:left;
      }

      　　給content div右加border，顏色寬度和rail一樣，并相對(duì)與rail浮動(dòng)。Margin:-150px;使rail div移到margin騰出的空間。假如content div變的比rail div 高，border隨content div變高。視覺(jué)效果就是似乎rail div也在變高。container的顏色設(shè)定和content div一樣，假如rail div達(dá)到最高，container隨之變高，這樣就給我們content變高的效果。
      　　看看效果。See it in action 。試改變字體大小，布局隨之變化。

      　　3個(gè)欄目：3個(gè)顏色
      　　3個(gè)欄目的布局有點(diǎn)不同:直接給container div加border.

      HTML代碼:

      示例代碼 [www.wf0088.com]
      <div id="container">
        <div id="center">CENTER<br />COLUMN CENTER</div>
        <div id="leftRail">LEFT RAIL</div>
        <div id="rightRail">RIGHT RAIL</div>
      </div>

      CSS代碼:

      示例代碼 [www.wf0088.com]
      #container{
        background-color:#0ff;
        float:left;
        width:500px;
        border-left:150px solid #0f0; » 
        /* The width and color of the left rail */
        border-right:200px solid #f00; » 
        /* The width and color of the right rail */
      }
      #leftRail{
        float:left;
        width:150px;
        margin-left:-150px;
        position:relative;
      }
      #center{
        float:left;
        width:500px;
        margin-right:-500px;
      }
      #rightRail{
        float:right;
        width:200px;
        margin-right:-200px;
        position:relative;
      }

      　　中間的欄目margin-right:-150px 使左邊的rail div始終沿中間欄目的左沿浮動(dòng)，使旁邊欄目在真確的位置顯示。還有一些方法可以實(shí)現(xiàn)，但這個(gè)方法最好，更易實(shí)現(xiàn)流動(dòng)布局（動(dòng)態(tài)布局）。

      　　因?yàn)檫厵谠赾ontainer div外，浮動(dòng)在border上。使用overflow: hidden使之隱藏：IE不支持，F(xiàn)irefox可以實(shí)現(xiàn)。邊欄不需要設(shè)置顏色，它會(huì)于container div的顏色保持一致。

      　　流動(dòng)布局

      　　了解定寬布局之后，我嘗試把這個(gè)方法用到動(dòng)態(tài)布局中去。邊欄仍然需要設(shè)置固定寬，很多瀏覽器不支持border:**%的屬性。但是我門(mén)可以使中間欄目自適應(yīng)。

      CSS代碼:

      示例代碼 [www.wf0088.com]
      #container{
        background-color:#0ff;
        overflow:hidden;
        margin:0 100px;
        padding-right:150px; /* The width of the rail */
      }
      * html #container{
        height:1%; /* So IE plays nice */
      }
      #content{
        background-color:#0ff;
        width:100%;
        border-right:150px solid #f00;
        margin-right:-150px;
        float:left;
      }
      #rail{
        background-color:#f00;
        width:150px;
        float:left;
        margin-right:-150px;
      }

      　　3個(gè)欄目自適應(yīng)布局　方法簡(jiǎn)單，不需要引用圖片，沒(méi)有BUG.

      HTML代碼:

      示例代碼 [www.wf0088.com]
      <div id="container">
        <div id="center">Center Column Content</div>
        <div id="leftRail">Left<br /> Sidebar</div>
        <div id="rightRail">Right Sidebar</div>
      </div>

      CSS代碼:

      示例代碼 [www.wf0088.com]
      body{
        margin:0 100px;
        padding:0 200px 0 150px;
      }
      #container{
        background-color:#0ff;
        float:left;
        width:100%;    
        border-left:150px solid #0f0;
        border-right:200px solid #f00;
        margin-left:-150px;
        margin-right:-200px;
        display:inline; /* So IE plays nice */
      }
      #leftRail{
        float:left;
        width:150px;
        margin-left:-150px;
        position:relative;
      }
      #center{
        float:left;
        width:100%;
        margin-right:-100%;
      }
      #rightRail{
        float:right;
        width:200px;
        margin-right:-200px;
        position:relative;
      }

      運(yùn)行效果:

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]

      　　作者: Alan Pearce　原文: Multi-Column Layouts Climb Out of the Box
      　　地址:http://alistapart.com/articles/multicolumnlayouts
      　　




      

      



      


      來(lái)源：無(wú)憂整理//所屬分類(lèi)：DIV+CSS實(shí)例/更新時(shí)間：2007-03-30


      

      



      


      



      相關(guān)DIV+CSS實(shí)例：