经典的两栏布局和三栏布局的几种简单的实现

时间：2015-04-01 19:09:19 阅读：244 评论：0 收藏：0 [点我收藏+]

标签：

一，三栏布局

1，两边栏宽度固定值，中间栏宽度自适应

（1）绝对定位法

【关键点】1，绝对定位从普通文档流中脱离出来，中间元素可以不用考虑左右定位元素占的位置

2，左右栏绝对定位到确定的位置上，（absolute，left，right）

3，中间栏左右外边距设置为左右栏的宽度，因此自身宽度就自适应的变成了窗口宽度-左右两边栏的宽度

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5      html,body{
 6           margin:0;
 7           padding:0;
 8           height:100%;
 9      }
10      #left,#right{
11           background-color:yellow;
12           position:absolute;
13           top:0;
14           width:100px;
15           height:100%;
16      }
17      #left{
18           left:0;
19      }
20      #right{
21           right:0;
22      }
23      #center{
24           background-color:green;
25           height:100%;
26           margin:0 100px;
27      }
28 </style>
29 </head>
30 <body>
31 <div id="left">左边栏</div>
32 <div id="right">右边栏</div>
33 <div id="center">中间栏</div>
34 </body>
35 </html>

（2）浮动定位法

【关键点】与绝对定位类似，中间的自适应宽度是靠设置相对于窗口的外边距来确定的，左右栏从文档流中脱离，浮动的各自位置

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5      html,body{
 6           margin:0;
 7           padding:0;
 8           height:100%;
 9      }
10      #left,#right{
11           background-color:yellow;
12           width:100px;
13           height:100%;
14      }
15      #left{
16           float:left;
17      }
18      #right{
19           float:right;
20      }
21      #center{
22           background-color:green;
23           height:100%;
24           margin:0 100px;
25      }
26 </style>
27 </head>
28 <body>
29 <div id="left">左边栏</div>
30 <div id="right">右边栏</div>
31 <div id="center">中间栏</div>
32 </body>
33 </html>

（3）负外边距法

【关键点】1，中间栏由里外两层构成，外层撑起整个内容区域，内层进行中间栏的布局，设置内层的左右外边距给左右栏留出空间

2，左右栏浮动并设置负的外边距浮动到相应位置

3，中间栏先于左右栏定位（三个div的位置顺序一定是中间栏在前）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 html,body{
 6      height:100%;
 7      margin:0;
 8      padding:0;
 9 }
10 #main{
11      margin:0;
12      padding:0;
13      width:100%;
14      height:100%;
15      float:left;
16 }
17 #inner{
18      margin:0 200px;
19      background-color:green;
20      height:100%;
21 }
22 #left,#right{
23      width:200px;
24      height:100%;
25      float:left;
26      background-color:#a0b3d6;
27 }
28 #left{
29      margin-left:-100%;
30 }
31 #right{
32      margin-left:-200px;
33 }
34 </style>
35 </head>
36 <body>
37 <div id="main">
38 <div id="inner">this is main content</div>
39 </div>
40 <div id="left">this is left sidebar content</div>
41 <div id="right">this is right siderbar content</div>
42 </body>
43 </html>

（4）使用flexbox属性

代码没有考虑一些低版本浏览器的兼容性，只做了一些简单的flex属性设置，但是效果很明显

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5      html,body{
 6           margin:0;
 7           padding:0;
 8           height:100%;
 9      }
10      body{
11           display:flex;
12           align-items:stretch;
13      }
14      #left,#right{
15           background-color:yellow;
16           flex:0 100px;
17      }
18      #center{
19           background-color:green;
20           flex:1 auto;
21      }
22 </style>
23 </head>
24 <body>
25 <div id="left">左边栏</div>
26 <div id="center">中间栏</div>
27 <div id="right">右边栏</div>
28 </body>
29 </html>

2，三栏布局中间栏固定大小，两边栏自适应

（1）负margin法

【关键点】1，左右两栏宽度不固定，因此在外层设置宽度各位50%，此时内层只需要左外边距为中间宽度的一半就可以为中间留出固定的宽度，达到两边自适应的目的

2，设置三栏都为浮动

3，三栏放在一排正常显示，只需要将左右两栏的外层设置负外边距就行了

4，这时三个div的顺序应该是固定的

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 html,body{
 6      height:100%;
 7      margin:0;
 8      padding:0;
 9 }
10 #left,#right {
11      float: left;
12      margin: 0 0 0 -271px;
13      width: 50%;
14      height:100%;
15 }
16 
17 #main {
18      width: 540px;
19      float: left;
20      background: green;
21      height:100%;
22 } 
23 #left .inner,#right .inner {
24      margin: 0 0 0 271px;
25      background: orange;
26      height:100%;
27 }
28 </style>
29 </head>
30 <body>
31 <div id="left">
32 <div class="inner">this is left sidebar content</div>
33 </div>
34 <div id="main">this is main content</div>
35 <div id="right">
36 <div class="inner">this is right siderbar content</div>
37 </div>
38 </body>
39 </html>

（2）flexbox

<!DOCTYPE html>
<html>
<head>
<style>
     html,body{
          margin:0;
          padding:0;
          height:100%;
     }
     body{
          display:flex;
          align-items:stretch;
     }
     #left,#right{
          background-color:yellow;
          flex:1 auto;
     }
     #center{
          background-color:green;
          flex:0 500px;
     }
</style>
</head>
<body>
<div id="left">左边栏</div>
<div id="center">中间栏</div>
<div id="right">右边栏</div>
</body>
</html>

二，两栏布局，左边栏为固定宽度的目录栏，右边栏宽度自适应

（1）负margin法

【关键点】1、首先让左边栏浮动到自己的位置，已经确定了大小宽度

2，中间栏设置内外两层，外层宽度为100%，然后有一个左边栏宽度的负margin，这样就可以放下左边栏了

3，内层设置外边距为左边栏宽度，在确定的位置显示

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 html,body{
 6      height:100%;
 7      margin:0;
 8      padding:0;
 9 }
10 #left{
11      background: green;
12      float: left;
13      width: 200px;
14      height:100%;
15 }
16 
17 #main {
18      width: 100%;
19      height:100%;
20      float: left;
21      margin:0 0 0 -200px;
22 }
23 #inner {
24      margin: 0 0 0 200px;
25      background: orange;
26      height:100%;
27 }
28 </style>
29 </head>
30 <body>
31 <div id="left">
32 <div class="inner">this is left sidebar content</div>
33 </div>
34 <div id="main">
35 <div id="inner">this is main content</div>
36 </div>
37 </body>
38 </html>

（2）绝对定位法

【关键点】1，左边绝对定位，右边就可以跟左边放在一排

2，右边通过设置外边距来决定自己的大小了

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 html,body{
 6      height:100%;
 7      margin:0;
 8      padding:0;
 9 }
10 #left{
11      background: green;
12      position:absolute;
13      width: 200px;
14      height:100%;
15      top:0;
16      left:0;
17 }
18 
19 #main {
20      height:100%;
21      margin-left:200px;
22      background-color:purple;
23 }
24 </style>
25 </head>
26 <body>
27 <div id="left">
28 <div class="inner">this is left sidebar content</div>
29 </div>
30 <div id="main">this is the main content</div>
31 </body>
32 </html>

（3）flexbox

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5      html,body{
 6           margin:0;
 7           padding:0;
 8           height:100%;
 9      }
10      body{
11           display:flex;
12           align-items:stretch;
13      }
14      #left{
15           background-color:yellow;
16           flex:0 200px;
17      }
18      #center{
19           background-color:green;
20           flex:1 auto;
21      }
22 </style>
23 </head>
24 <body>
25 <div id="left">左边栏</div>
26 <div id="center">中间栏</div>
27 </body>
28 </html>

【最后，关于负外边距：就相当于一个透明的相纸折在了元素的内容上，其他的元素如果在负外边距上是可以把外边距的部分遮盖掉的，但是如果元素有内容并没有被遮盖，还是可以显示】

经典的两栏布局和三栏布局的几种简单的实现

标签：

原文地址：http://www.cnblogs.com/wmx--/p/4384332.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行