前端经典笔试题（腾讯前端，三栏布局）

前端经典笔试题（腾讯前端，三栏布局）

旧公司辞职的工作已经做得七七八八了，今天去了一家公司招聘会，周末的招聘会，说明还是有心要找人的。

刚去到，感觉人特别的多。不过一个小时的笔试过后人已经见少了。

其中有一首题，觉得特别经典，当时在搜索笔试题时有见过，源于腾讯的一道题。当时感觉纯笔头写有纰漏，在此重新写一篇。

实现一个三栏布局的网页，中间部分要自适应宽度并且优先加载。左边宽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>

 

posted @ 2014-03-09 21:36  p2227  阅读(5495)  评论(6)  编辑  收藏  举报