吃過晚飯后，開始刷前端筆試題，卻遇到了一道CSS難題——使用CSS實現左部自適應、右部固定寬度為200px的布局。當時第一眼看到題目時，以為只是一道很簡單的題目。不就是定義兩個左浮動的div，右部的寬度固定為200px，左部的寬度為100%，但是真的是那么簡單嗎？我當時信心十足的以為真的就是這么簡單的！看來，自信真的是來源於無知啊！於是馬上切換到sublime開始編碼了。當時，寫好的第一個版本大概如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index20</title> <style> /*reset default style*/ * { padding: 0; margin: 0; } .left { border: 2px solid green; height: 320px; width: 100%; /*寬度為100%*/ float: left; /*左浮動，使其脫離文檔流*/ } .right { border: 2px solid blue; height: 320px; width: 200px; /*固定寬度200px*/ float: left; /*左浮動，使其脫離文檔流*/ margin-left: -210px; /*設置margin-left為負數，可以和左部div在一行*/ } </style> </head> <body> <div class="left"> Hi I on at the left side! </div> <div class="right"> Hi, I on the right side! </div> </body> </html>
在chrome瀏覽了一下，效果如下：
乍一看，上面的效果好像已經達到了我們的題目要求了。但是，接下bug就開始暴露出來了！就在我為自己完成了任務而高興時，就打開新浪新聞放松一下。手賤的我，看完了一條關於谷歌alphago完爆韓國頂級棋手小李的新聞時，然后隨便復制了下來，放到left里面，這時候，我開始慌了，效果如下:
Oh,我的天吶！左部的內容竟然溢出了而且還跑到了右部去了！本以為自己的布局已經達到了十全十美的了，現在問題卻突然暴露出來了。心好累啊！
然而，心累有個卵用啊。既然bug都已經暴露了，那就老老實實的debug吧！
靜靜的的發呆了數分鍾，總算明白了，bug題的根源在於我給左部的元素設置了寬度為100%了，這個100%並不是整個可視區域減去右部元素之后的100%，而是直接就是整個可視區域的100%了！所以，它就理所當然的會布滿整個可視區域的了！但是，如果，我不用100%的話，那還有什么辦法啊？
這下，可真的把我難倒了！此刻失落的心情應該和韓國小李有的一比！
但是，我並沒有這樣就認輸了！后來，嘗試試了好久，總算發現了一種可行的解決方案了：在左部元素里面再添加加一個div，而它才是真正的自適應寬度的div，讓它的margin-right大約等於右部div的寬度（200）加上左右邊框（border）的寬度。代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index20</title> <style> /*reset default style*/ * { padding: 0; margin: 0; } .left { border: 2px solid green; height: 320px; width: 100%; /*寬度為100%*/ float: left; /*左浮動，使其脫離文檔流*/ } .right { border: 2px solid blue; height: 320px; width: 200px; /*固定寬度200px*/ float: left; /*左浮動，使其脫離文檔流*/ margin-left: -210px; /*設置margin-left為負數，可以和左部div在一行*/ } .content { /*使這個真正的自適應寬度的div右邊距大約等於右部div的盒模型寬度*/ margin-right: 210px; } </style> </head> <body> <div class="left"> <div class="content"> 這里面是一大串的文字...... </div> </div> <div class="right"> Hi, I on the right side! </div> </body> </html>
這時候的效果如下：
但是，那個綠色邊框跟藍色邊框連在了一起，不是很好看，所以，應該把邊框設置在.content元素，而不是.left，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index20</title> <style> /*reset default style*/ * { padding: 0; margin: 0; } .left { height: 320px; width: 100%; /*寬度為100%*/ float: left; /*左浮動，使其脫離文檔流*/ } .right { border: 2px solid blue; height: 320px; width: 200px; /*固定寬度200px*/ float: left; /*左浮動，使其脫離文檔流*/ margin-left: -210px; /*設置margin-left為負數，可以和左部div在一行*/ } .content { /*使這個真正的自適應寬度的div右邊距大約等於右部div的盒模型寬度*/ margin-right: 210px; border: 2px solid green; } </style> </head> <body> <div class="left"> <div class="content"> 這里面是一大串的文字...... </div> </div> <div class="right"> Hi, I on the right side! </div> </body> </html>
最終效果，如下：
OK，“實現左部自適應寬度，右部固定寬度為200px的布局”這個任務已經完成啦！
這只是我嘗試了N次失敗之后，發現可行的一種方法而已，當然可能還有很多的其他方法可以實現這樣的布局。親，如果你還有什么idea的話，記得留言交流哦！