浏览器三栏布局实现

一般在面试的过程中，都会让我们现场写三栏布局的代码，但有的时候会有一些不注意的细节性问题。

以下有两种解决方案，一种是兼容大部分浏览器，一种是只能部分浏览器才可以实现

 

第一种方案，最容易想到的是定位

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三栏布局</title>
 6     <style>
 7         .container{
 8             width:100%;
 9             height:100%;
10             position:relative;
11         }
12         .left{
13             position:absolute;
14             top:0;
15             left:0;
16             width:100px;
17             background:#f0e;
18         }
19         .main{
20             position:absolute;
21             left:100px;
22             right:100px;
23             width:auto;
24             top:0;
25             background:#ddd;
26         }
27         .right{
28             position:absolute;
29             right:0;
30             top:0;
31             width:100px;
32             background:#111;
33         }
34     </style>
35 </head>
36 <body>
37     <div class="container">
38         <div class="left">1233</div>
39         <div class="main">23456</div>
40         <div class="right">234567</div>
41     </div>
42 </body>
43 </html>
View Code

 

第二种解决方案相对于第一种解决方案，代码更精简，但只能在部分浏览器中实现。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             padding:0;
 9             margin:0;
10         }
11         .container{display:flex;}
12         .left,.right{width:100px;background:blue;}
13         .right{order:2;}
14         .main{
15             order:1;
16             flex:1;
17             background:red;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="container">
23         <div class="left">1</div>
24         <div class="main">2</div>
25         <div class="right">3</div>
26     </div>
27 </body>
28 </html>
View Code

 

第三种解决方案，使用padding和margin-left和margin-right负值来实现的，这种方案需要注意的地方是，main部分不能放在中间，要放在最后，否则，不能实现三栏布局，前两个left和right可以随便排序。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三栏布局</title>
 6     <style>
 7         .container{
 8             min-height:600px;
 9             background:#feff0a;
10             padding:0 300px;
11         }
12         .left{
13             float:left;
14             width:300px;
15             min-height:400px;
16             margin-left:-300px;
17             background:#f0e;
18         }
19         .main{
20             min-height:400px;            
21             background:#ddd;
22         }
23         .right{
24             min-height:400px;
25             margin-right:-300px;
26             width:300px;
27             float:right;
28             background:#111;
29         }
30         .clearfix{
31             display:block;
32             content:"";
33             visibility:hidden;
34             clear:both;
35             height:0;
36         }
37     </style>
38 </head>
39 <body>
40     <div class="container">
41         <div class="left"></div>        
42         <div class="right"></div>
43         <div class="main"></div>
44         <div class="clearfix"></div>
45     </div>
46 </body>
47 </html>
View Code

 

posted @ 2016-08-29 15:58  Tome.Wong  阅读(280)  评论(0)  编辑  收藏  举报