前端經典筆試題（騰訊前端，三欄布局）
舊公司辭職的工作已經做得七七八八了，今天去了一家公司招聘會，周末的招聘會，說明還是有心要找人的。
剛去到，感覺人特別的多。不過一個小時的筆試過后人已經見少了。
其中有一首題，覺得特別經典，當時在搜索筆試題時有見過，源於騰訊的一道題。當時感覺純筆頭寫有紕漏，在此重新寫一篇。
實現一個三欄布局的網頁，中間部分要自適應寬度並且優先加載。左邊寬150px;右邊欄寬200px;
我的思路：既然左右有固定寬度，當然要設置了。中間優先加載，按照HTML順序解釋的原則，即中間放在文檔前面。而中間放在前又會影響文檔流的布局，所以在此改變一下元素的相對位置即可，解法應該有不少，解法網上能搜索到的不少，在此把自己的思路記錄下來。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div{float:left;} 6 #left{width:150px;position:absolute;left:0px;} 7 #right{width:200px;float:right;} 8 #middle{position:relative;left:150px;} 9 </style> 10 </head> 11 <body> 12 <div id="middle"> 13 middle;middle; 14 </div> 15 <div id="left">left</div> 16 <div id="right">right</div> 17 </body> 18 </html>
V2.0 中間適應寬度
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 body{margin:0; padding:0;} 6 #left{float:left;width:150px;background:red;} 7 #right{float:right;width:200px;background:green;} 8 #middle{position:absolute;left:150px;right:200px;word-wrap:break-word;background:blue;} 9 </style> 10 </head> 11 <body> 12 <div id="middle"> 13 middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle; 14 middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle; 15 </div> 16 <div id="left">left</div> 17 <div id="right">right</div> 18 </body> 19 </html>
V 3.0 中間適應寬度，整體適應高度
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 body{margin:0; padding:0;} 6 #left{width:150px;position:absolute;left:0;top:0;} 7 #right{width:200px;position:absolute;right:0; top:0;} 8 #middle{word-wrap:break-word;} 9 10 11 #backLeft{background:red;padding-left:150px;} 12 #backMiddle{background:blue;padding-right:200px;} 13 #backRight{background:green;} 14 </style> 15 </head> 16 <body> 17 <div id="backLeft"> 18 <div id="backMiddle"> 19 <div id="backRight"> 20 <div id="middle"> 21 middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle; 22 middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle; 23 <p>middle;</p> 24 <p>middle;</p> 25 <p>middle;</p> 26 <p>middle;</p> 27 <p>middle;</p> 28 <p>middle;</p> 29 <p>middle;</p> 30 <p>middle;</p> 31 <p>middle;</p> 32 <p>middle;</p> 33 <p>middle;</p> 34 <p>middle;</p> 35 <p>middle;</p> 36 <p>middle;</p> 37 <p>middle;</p> 38 </div> 39 <div id="right">right</div> 40 <div id="left">left</div> 41 </div> 42 </div> 43 </div> 44 </body> 45 </html>