吃過晚飯後,開始刷前端筆試題,卻遇到了一道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的話,記得留言交流哦!