摘要：今天有位朋友一早從妙味課堂轉(zhuǎn)來一個有關(guān)于布局的面試題，需要解決，花了點時間寫了幾個放上來與大家分享受。

今天有位朋友一早從妙味課堂轉(zhuǎn)來一個有關(guān)于CSS布局的面試題，需要解決，花了點時間寫了幾個DEMO,放上來與大家分享受。那么我們在看DEMO之前一起先來看看這個面試題的具體要求吧：

左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬；
左右兩列，等高布局；
左右兩列要求有最小高度，例如：200px;（當內(nèi)容超出200時，會自動以等高的方式增高）
要求不用JS或CSS行為實現(xiàn)；
仔細分析試題要求，要達到效果其實也并不是太難，只是給人感覺像有點蛋疼的問題一樣。但是你仔細看后你會覺得不是那么回事：

左邊固定，右邊自適應(yīng)布局，這個第一點應(yīng)該來說是非常的容易，實現(xiàn)的方法也是相當?shù)亩啵敲淳涂梢哉f第一條要求已不是什么要求了；
左右兩列等高布局，這一點相對來說要復(fù)雜一些，不過你要是了解了怎么實現(xiàn)等高布局，那么也是不難。我個人認為這個考題關(guān)鍵之處就在考這里，考你如何實現(xiàn)等高布局；所以這一點你需要整明白如何實現(xiàn)；
至于第三條要求，應(yīng)該來說是很方面的，我們隨處都可以看到實現(xiàn)最小高度的代碼；
第四條這個要求我想是考官想讓我們面試的人不能使用js來實現(xiàn)等高布局和最小高度的功能。
上面簡單的分析了一下實現(xiàn)過程，那么最終關(guān)鍵之處應(yīng)該是就是“讓你的代碼要能同時實現(xiàn)兩點，其一就是左邊固定，右邊自適應(yīng)的布局；其二就是實現(xiàn)兩列等高的布局”，如果這兩個功能完成，那么你也就可以交作業(yè)了。那么下面我們就先來看看這兩 點是如合實現(xiàn)：

一、兩列布局：左邊固定寬度，右邊自適應(yīng)寬度

這樣的布局，其實不是難點，我想很多同學(xué)都有實現(xiàn)過，那么我就在此稍微介紹兩種常用的方法：

方法一：浮動布局

這種方法我采用的是左邊浮動，右邊加上一個margin-left值，讓他實現(xiàn)左邊固定，右邊自適應(yīng)的布局效果

HTML Markup

    
Left sidebar
    
Main Content

CSS Code

上面這種實現(xiàn)方法最關(guān)鍵之處就是自適應(yīng)寬度一欄“div#content”的“margin-left”值要等于固定寬度一欄的寬度值，大家可以點擊查看上面代碼的DEMO

方法二：浮動和負邊距實現(xiàn)

這個方法采用的是浮動和負邊距來實現(xiàn)左邊固定寬度右邊自適應(yīng)寬度的布局效果，大家可以仔細對比一下上面那種實現(xiàn)方法，看看兩者有什么區(qū)別：

HTML Markup

    

        Left Sidebar
    
    

        

            Main Content
        
    

CSS Code

    *{
        margin: 0;
        padding: 0;
    }
    #left {
        background-color: green;
        float: left;
        width: 220px;
        margin-right: -100%;
    }
    
    #content {
        float: left;
        width: 100%;
    }
    
    #contentInner {
        margin-left: 220px;/*==等于左邊欄寬度值==*/
        background-color: orange;
    }

這種方法看上去要稍微麻煩一點，不過也是非常常見的一種方法，大家可以看看他的DEMO效果。感覺一下，和前面的DEMO有什么不同之處。

我在這里就只展示這兩種方法，大家肯定還有別的實現(xiàn)方法，我就不在多說了，因為我們今天要說的不是這個問題。上面完成了試題的第一種效果，那么大家就要想辦法來實現(xiàn)第二條要求——兩列等高布局。這一點也是本次面試題至關(guān)重要的一點，如果你要是不清楚如何實現(xiàn)等高布局的話，我建議您先閱讀本站的《八種創(chuàng)建等高列布局》，里面詳細介紹了八種等高布局的方法，并附有相關(guān)代碼，而且我們后面的運用中也使用了其中的方法。

現(xiàn)在關(guān)鍵的兩點都完成了，那么我們就需要實現(xiàn)第三條要求，實現(xiàn)最小高度的設(shè)置，這個方法很簡單：

    min-height: 200px;
    height: auto !important;
    height: 200px;

上面的代碼就輕松的幫我們實現(xiàn)了跨瀏覽器的最小高度設(shè)置問題。這樣一來，我們可以交作業(yè)了，也完面了這個面試題的考試。為了讓大家更能形象的了解，我在這里為大家準備了五種不同的實現(xiàn)方法：

方法一：

別的不多說，直接上代碼，或者參考在線DEMO，下面所有的DEMO都有HTML和CSS代碼，感興趣的同學(xué)自己慢慢看吧。

HTML Markup

    

        

            
Left Sidebar
            
Main Content
        
    

CSS Code

查看在線DEMO。

方法二

HTML Markup

    

        
Left Sidebar
        
Main Content
    

CSS Code

查看在線的DEMO。

方法三：

HTML Markup

    

        
Main Content
        
Left Sidebar
    

CSS Code

        *{margin: 0;padding: 0;}
         #container{
             background-color:#0ff;
             overflow:hidden;
             padding-left:220px; /* 寬度大小等與邊欄寬度大小*/
         }
         * html #container{
             height:1%; /* So IE plays nice */
         }
         #content{
             background-color:#0ff;
             width:100%;
             border-left:220px solid #f00;/* 寬度大小等與邊欄寬度大小*/
             margin-left:-220px;/* 寬度大小等與邊欄寬度大小*/
             float:right;
         }
         #sidebar{
             background-color:#f00;
             width:220px;
             float:right;
             margin-left:-220px;/* 寬度大小等與邊欄寬度大小*/
         }
         #content,
         #sidebar {
             min-height: 200px;
             height: auto !important;
             height: 200px;
         }

查看在線DEMO效果。

方法四：

HTML Markup

    

        

                
Left Sidebar
                
Main Content
         
    

CSS Code

    *{padding: 0;margin:0;}
    #container2 {
          float: left;
          width: 100%;
          background: orange;
          position: relative;
          overflow: hidden;
      }
      #container1 {
          float: left;
          width: 100%;
          background: green;
          position: relative;
          left: 220px;/* 寬度大小等與邊欄寬度大小*/
      }
 
      #col2 {
          position: relative;
          margin-right: 220px;/* 寬度大小等與邊欄寬度大小*/
      }
 
      #col1 {
          width: 220px;
          float: left;
          position: relative;
          margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
      }
   
        #col1,#col2 {
            min-height: 200px;
            height: auto !important;
            height: 200px;
        }

查看在線DEMO。

方法五：

HTML Markup

    

        

            
Left Sidebar
            

                
Main Content
            
        
    

CSS Code

    *{padding: 0;margin: 0;}
    #container1 {
        float: left;
        width: 100%;
        overflow: hidden;
        position: relative;
        background-color: #dbddbb;
    }
    #container {
        background-color: orange;
        width: 100%;
        float: left;
        position: relative;
        left: 220px;/* 寬度大小等與邊欄寬度大小*/
    }
    #left {            
        float: left;
        margin-right: -100%;
        margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
        width: 220px;
    }
    #content {
        float: left;
        width: 100%;
        margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
    }
    #contentInner {            
        margin-left: 220px;/* 寬度大小等與邊欄寬度大小*/
        overflow: hidden;
    }
    
    #left,
    #content {
            min-height: 200px;
            height: auto !important;
            height: 200px;
    }

查看在線DEMO。

針對上面的面試題要求，我一共使用了五種不同的方法來實現(xiàn)，經(jīng)過測試都能在各瀏覽器中運行，最后我有幾點需要特別提出：

上面所有DEMO中，要注意其方向性的配合，并且值要統(tǒng)一，如果您想嘗試使用自己布局需要的寬度值，請對照相關(guān)代碼環(huán)節(jié)進行修改；
上面所有DEMO中，沒有設(shè)置他們之間的間距，如果您想讓他們之間有一定的間距，有兩種方法可能實現(xiàn)，其一在上面的DEMO基礎(chǔ)上修改相關(guān)參數(shù)，其二，在相應(yīng)的里面加上"div"標簽，并設(shè)置其“padding”值，這樣更安全，不至于打破你的布局
因為我們這里有一列使用了自適應(yīng)寬度，在部分瀏覽器下，當瀏覽器屏幕拉至到一定的大小時，給我們帶來的感覺是自適應(yīng)寬度那欄內(nèi)容像是被隱藏，在你的實際項目中最好能在“body”中加上一個“min-width”的設(shè)置。
那么有關(guān)于這個面試題，就我自己的拙見，就說到這吧。希望大家會喜歡這樣的答案，如果您有更好的答案，煩請告訴我一下，讓我也好好學(xué)習(xí)學(xué)習(xí)。如果大有發(fā)現(xiàn)有什么錯誤，或者對這個有更好的意見，可以在下面的評論中直接給我留言。

如需轉(zhuǎn)載煩請注明出處：W3CPLUS

著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
原文: http://www.w3cplus.com/css/tw... ? w3cplus.com