今天有位朋友一早從妙味課堂轉來乙個有關於css布局的面試題，需要解決，花了點時間寫了幾個demo,放上來與大家分享受。那麼我們在看demo之前一起先來看看這個面試題的具體要求吧：
左側固定寬，右側自適應螢幕寬；
左右兩列，等高布局；
左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高）
要求不用js或css行為實現；
仔細分析試題要求，要達到效果其實也並不是太難，只是給人感覺像有點蛋疼的問題一樣。但是你仔細看後你會覺得不是那麼回事：
左邊固定，右邊自適應布局，這個第一點應該來說是非常的容易，實現的方法也是相當的多，那麼就可以說第一條要求已不是什麼要求了；
左右兩列等高布局，這一點相對來說要複雜一些，不過你要是了解了怎麼實現等高布局，那麼也是不難。我個人認為這個考題關鍵之處就在考這裡，考你如何實現等高布局；所以這一點你需要整明白如何實現；
至於第三條要求，應該來說是很方面的，我們隨處都可以看到實現最小高度的**；
第四條這個要求我想是考官想讓我們面試的人不能使用js來實現等高布局和最小高度的功能。
上面簡單的分析了一下實現過程，那麼最終關鍵之處應該是就是「讓你的**要能同時實現兩點，其一就是左邊固定，右邊自適應的布局；其二就是實現兩列等高的布局」，如果這兩個功能完成，那麼你也就可以交作業了。那麼下面我們就先來看看這兩 點是如合實現：
一、兩列布局：左邊固定寬度，右邊自適應寬度
這樣的布局，其實不是難點，我想很多同學都有實現過，那麼我就在此稍微介紹兩種常用的方法：
方法一：浮動布局
這種方法我採用的是左邊浮動，右邊加上乙個margin-left值，讓他實現左邊固定，右邊自適應的布局效果
html markup
left sidebarcss codemain content
方法二：浮動和負邊距實現
這個方法採用的是浮動和負邊距來實現左邊固定寬度右邊自適應寬度的布局效果，大家可以仔細對比一下上面那種實現方法，看看兩者有什麼區別：
html markup
left sidebarcss codemain content
*這種方法看上去要稍微麻煩一點，不過也是非常常見的一種方法，大家可以看看他的demo效果。感覺一下，和前面的demo有什麼不同之處。#left
#content
#contentinner
我在這裡就只展示這兩種方法，大家肯定還有別的實現方法，我就不在多說了，因為我們今天要說的不是這個問題。上面完成了試題的第一種效果，那麼大家就要想辦法來實現第二條要求——兩列等高布局。這一點也是本次面試題至關重要的一點，如果你要是不清楚如何實現等高布局的話，我建議您先閱讀本站的《八種建立等高列布局》，裡面詳細介紹了八種等高布局的方法，並附有相關**，而且我們後面的運用中也使用了其中的方法。
現在關鍵的兩點都完成了，那麼我們就需要實現第三條要求，實現最小高度的設定，這個方法很簡單：
min-height: 200px;上面的**就輕鬆的幫我們實現了跨瀏覽器的最小高度設定問題。這樣一來，我們可以交作業了，也完麵了這個面試題的考試。為了讓大家更能形象的了解，我在這裡為大家準備了五種不同的實現方法：height: auto !important;
height: 200px;
方法一：
html markup
main content
css code
方法二html markup
left sidebarcss code 方法三：main content
html markup
main contentcss codeleft sidebar
*方法四：#container
* html #container
#content
#sidebar
#content,
#sidebar
html markup
left sidebarcss codemain content
*方法五：#container2
#container1
#col2
#col1
#col1,#col2
html markup
left sidebarcss codemain content
*針對上面的面試題要求，我一共使用了五種不同的方法來實現，經過測試都能在各瀏覽器中執行，最後我有幾點需要特別提出：#container1
#container
#left
#content
#contentinner
#left,
#content
上面所有demo中，要注意其方向性的配合，並且值要統一，如果您想嘗試使用自己布局需要的寬度值，請對照相關**環節進行修改；
上面所有demo中，沒有設定他們之間的間距，如果您想讓他們之間有一定的間距，有兩種方法可能實現，其一在上面的demo基礎上修改相關引數，其二，在相應的裡面加上"div"標籤，並設定其「padding」值，這樣更安全，不至於打破你的布局
因為我們這裡有一列使用了自適應寬度，在部分瀏覽器下，當瀏覽器螢幕拉至到一定的大小時，給我們帶來的感覺是自適應寬度那欄內容像是被隱藏，在你的實際專案中最好能在「body」中加上乙個「min-width」的設定。
CSSS實現右側定寬左側自適應
csss實現右側固定寬度，左側自適應，或者左惻固定寬度右側自適應 首先，html結構如下 注意，html中必須使用div標籤，不要妄圖使用p標籤來達到目的。因為div有個預設屬性，即如果不設定寬度，那他會自動填滿他的父標籤的寬度。clearfix after container content在le...
左側固定 右側自適應
左側浮動，右側margin left值為左側寬即可。由於左側浮動，左側盒子脫標，右側仍在標準文件流，右側盒子寬度是剩下的寬度，效果為右側自適應。右側內容可居中，常規用法即可。需注意的是左側浮動，右側不能繼續浮動。如果兩邊盒子都浮動，由於右側盒子寬度不固定，預設為內容撐開寬度。若浮動，極有可能在第二排...
CSS左側固定寬 右側自適應（相容所有瀏覽器）
方法 一 浮動布局 html view plain copy html divid left left sidebar div divid content main content div css code style type text css left content style html vi...