一站式電子商務網(wǎng)絡營銷機構！
左側固定寬，右側自適應屏幕寬；
左右兩列，等高布局；
左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高）
要求不用JS或CSS行為實現(xiàn)；
仔細分析試題要求，要達到效果其實也并不是太難，只是給人感覺像有點蛋疼的問題一樣。但是你仔細看后你會覺得不是那么回事：
左邊固定，右邊自適應布局，這個第一點應該來說是非常的容易，實現(xiàn)的方法也是相當?shù)亩?，那么就可以說第一條要求已不是什么要求了；
左右兩列等高布局，這一點相對來說要復雜一些，不過你要是了解了怎么實現(xiàn)等高布局，那么也是不難。我個人認為這個考題關鍵之處就在考這里，考你如何實現(xiàn)等高布局；所以這一點你需要整明白如何實現(xiàn)；
至于第三條要求，應該來說是很方面的，我們隨處都可以看到實現(xiàn)最小高度的代碼；
第四條這個要求我想是考官想讓我們面試的人不能使用js來實現(xiàn)等高布局和最小高度的功能。
上面簡單的分析了一下實現(xiàn)過程，那么最終關鍵之處應該是就是“讓你的代碼要能同時實現(xiàn)兩點，其一就是左邊固定，右邊自適應的布局；其二就是實現(xiàn)兩列等高的布局”，如果這兩個功能完成，那么你也就可以交作業(yè)了。那么下面我們就先來看看這兩 點是如合實現(xiàn)：
一、兩列布局：左邊固定寬度，右邊自適應寬度
這樣的布局，其實不是難點，我想很多同學都有實現(xiàn)過，那么我就在此稍微介紹兩種常用的方法：
方法一：浮動布局
這種方法我采用的是左邊浮動，右邊加上一個margin-left值，讓他實現(xiàn)左邊固定，右邊自適應的布局效果
HTML Markup
CSS Code
上面這種實現(xiàn)方法最關鍵之處就是自適應寬度一欄“div#content”的“margin-left”值要等于固定寬度一欄的寬度值，大家可以點擊查看上面代碼的DEMO
方法二：浮動和負邊距實現(xiàn)
這個方法采用的是浮動和負邊距來實現(xiàn)左邊固定寬度右邊自適應寬度的布局效果，大家可以仔細對比一下上面那種實現(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有什么不同之處。