前些日談到布局，學長說，你給我寫個「一邊固定寬度一邊自適應」。我當時有點矇圈，回去查了些資料現在總結了一下。
1.問題：什麼叫做自適應？
有兩種情形，其實這兩種還蠻不同的。放在一起來總結吧。
情形一：寬度自適應，一列定寬，一列自適應，隨視窗大小改變而無滾動條出現。
情形二：高度自適應，建立高度相等的列。
-------------這篇文先說【第一種情況】吧~ 就考慮左側定寬200px，右側自適應咯~----------------------
2. 思路？
定寬的列，自然會想到要設定寬度，暫且設定為200px。
自適應的列，其寬度需為100%。
高度均為200px,設定背景顏色用來區別兩個div。
貼上**
left
right
會是什麼情形呢？
3. ok， 現在【最重要的是】，考慮如何讓兩者同在一行！！！
有2種方式：absolute方式和float方式。
4. absolute方式
左div設定position：absolute;使其脫離文件流，相對父div的最左絕對定位。它像不存在了一樣，於是右div就『上』來了。
position：relative;}_height:1%;/*ie6hack*/
#left
你認為這就會在一行麼？
看看效果
發現二者還是各佔一行。為什麼呢？因為右div的寬是100%，就算浮動了，該行也沒有左div的位置啊，於是，牛x的負margin就出現了！
#right{這句相當於右div的左邊留了個200px寬的空兒，說：這地兒讓給你們了。於是左div就浮了上來。margin:0 0 0 -200px;
又怎麼了？
可是發現左div又給右div擋住了。可以看到html中【別具匠心的】在右div裡巢狀了乙個div，控制它的位置就可以了。
#right div {
margin-left:200px;
看看效果：
ie6也如此哦~大功告成！
6. 總結一下吧。
其實最主要的是，如何讓兩個div同處一行，而這兩個div有乙個的寬度還是特殊的100%。
瀏覽器縮放的時候還不能有任何奇怪的事發生哦，這個只有試試才知道！
要深刻的理解絕對定位absolute和浮動float,此處負margin是重頭戲！參考《精通css 高階標準web解決方案》
over，第一篇技術文分享。有錯誤的地方，大家敬請指出！！！進步進步進步！！！！！
剛剛還傻傻的用**發芽網一次次的貼**來著，原來帖子這樣寫啊~長見識長見識。。。。。嘻嘻
CSS自適應寬度圓角按鈕
原理就是通過背景的左對齊和右對齊用a標籤和span標籤組合出乙個完整的圓角矩形。再通過hover標籤去滑動。css bodyh1a a hover aspan a hoverspan html body ahref mce href span 首頁 span a ahref mce href spa...
CSS自適應寬度圓角按鈕
1.背景實現 a a span a hover a hover span 免費註冊 登入自適應寬度 img 原理就是做乙個足夠寬的背景，a和span都用同一張背景圖，文字左側部分顯示的是a的背景，文字本身和右側部分顯示的是span的背景，拼接成乙個按鈕。2.css3 火狐和chrome實現 butt...
css兩欄寬度自適應
對於做後台管理系統或者一屏頁面來說，會涉及到做左右兩欄的效果，左邊作為導航欄，右邊作為主頁面。通常情況下，我們首先想到的是使用浮動效果將兩欄浮動起來左右放置，但是這樣會導致，其中一些內容的位置會出現錯位。因此這裡，給出了乙個兩欄寬度自適應的方式，用來解決浮動問題。給定左邊導航欄的寬度為200px，高...