前端經典筆試題（騰訊前端，三欄佈局）

時間 2019-12-01

原文原文鏈接

前端經典筆試題（騰訊前端，三欄佈局）

舊公司辭職的工做已經作得七七八八了，今天去了一家公司招聘會，週末的招聘會，說明仍是有心要找人的。html

剛去到，感受人特別的多。不過一個小時的筆試事後人已經見少了。前端

其中有一首題，以爲特別經典，當時在搜索筆試題時有見過，源於騰訊的一道題。當時感受純筆頭寫有紕漏，在此從新寫一篇。佈局

實現一個三欄佈局的網頁，中間部分要自適應寬度而且優先加載。左邊寬150px;右邊欄寬200px;spa

個人思路：既然左右有固定寬度，固然要設置了。中間優先加載，按照HTML順序解釋的原則，即中間放在文檔前面。而中間放在前又會影響文檔流的佈局，因此在此改變一下元素的相對位置便可，解法應該有很多，解法網上能搜索到的很多，在此把本身的思路記錄下來。code

 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 中間適應寬度htm

 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 中間適應寬度，總體適應高度blog

 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>