前端经典笔试题（腾讯前端，三栏布局）
旧公司辞职的工作已经做得七七八八了，今天去了一家公司招聘会，周末的招聘会，说明还是有心要找人的。
刚去到，感觉人特别的多。不过一个小时的笔试过后人已经见少了。
其中有一首题，觉得特别经典，当时在搜索笔试题时有见过，源于腾讯的一道题。当时感觉纯笔头写有纰漏，在此重新写一篇。
实现一个三栏布局的网页，中间部分要自适应宽度并且优先加载。左边宽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>