首页 > 代码库 > css布局

css布局

2024-09-04 05:02:37   218人阅读

css布局主要是position,float以及margin等属性实现

本文主要介绍几种常见的布局：三列布局，等高布局以及水平垂直居中布局。

1 三列布局

1.1 左右列固定宽度，中间列宽度自适应

方法1：absolute+margin

1 <div id="left">left</div>
2 <div id="center">center</div>
3 <div id="right">right</div>
 1 #left,#right{
 2       width:200px;
 3       postion:absolute;
 4       top:0; /*注意不能少*/
 5       background-color:red;
 6  }
 7 #left{left:0;}
 8 #right{right:0;}
 9 
10 #center{
11      position:relative;
12      margin:0 210px;
13      background-color:green;
14 }

缺点：当中间列设置最小宽度限制时，当页面小于一定宽度，三列元素会发生层叠

方法2：float+margin

1 <div id="left">left</div>
2 <div id="right">right</div>
3 <div id="center">center</div>
 1 #left,#right{
 2     float:left;
 3     width:200px;
 4     background-color:red;
 5 }
 6 #right{float:right;}
 7 
 8 #center{
 9     float:left;
10     margin:0 210px;
11     background-color:green;
12 }

方法3：负margin

margin-left为负时，该元素向之前的元素铺盖；margin-right为负时，该元素将其他元素拽向自己

1 <div id="center">
2     <div id="centerContent">center</div>
3 </div>
4 <div id="left">left</div>
5 <div id="right">right</div>
 1 #center{
 2     float:left;
 3     width:100%;
 4 }
 5 #centerContent{
 6     margin:0 210px;
 7     background-color:green;
 8 }
 9 
10 #left,#right{
11     float:left;
12     width:200px;
13     background-color:red;
14 }
15 
16 #left{margin-left:-100%;}
17 #right{margin-left:-210px}

 

1.2 左右列宽度自适应，中间列固定宽度

 1 <div id="left"> 
 2     <div class="inner">this is left sidebar content</div> 
 3 </div>
 4 
 5 <div id="main"> 
 6     <div class="inner">this is main content</div> 
 7 </div> 
 8 
 9 <div id="right"> 
10     <div class="inner">this is right siderbar content</div> 
11 </div>
 1 #left, #right { 
 2     float: left; 
 3     margin: 0 0 0 -271px; 
 4     width: 50%; 
 5 } 
 6 #main { 
 7     width: 540px;
 8     float: left;
 9     background: green; 
10 } 
11 
12 
13 #left .inner, #right .inner { 
14     margin: 0 0 0 271px;
15     background: red; 
16 }

 

2 等高布局

方法1：负margin

因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，使背景色铺满元素区域，又符合元素的盒模型的计算公式，实现视觉上的等高效果
 

方法2：table

table元素中的table-cell元素默认就是等高的
 
1 <div id="parent">
2      <div id="left">left</div>
3       <div id="center"> center </div>
4      <div id="right">right</div>
5 </div>
1 #parent{
2      display:table;
3 }
4 #left,#center,#right{
5      display:table-cell;
6 }
 

方法3：绝对定位absolute

设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同，实现等高效果。
  
 1 #parent{
 2     position: relative;
 3     height: 40px;
 4 }
 5 #left, # center, # right{
 6     position: absolute;
 7     top: 0;
 8     bottom: 0;
 9 }
10 # left{
11     left: 0;
12     width: 100px;
13 }
14 # center{
15     left: 120px;
16     right: 120px;
17 }
18 # right{
19     width: 100px;
20     right: 0;
21 }

 

3 水平垂直居中布局

方法1：absolute

大家都知道margin:0 auto可以实现元素的水平居中，那么margin:auto+绝对定位可以实现水平垂直居中。

1 <div id="parent">
2     <div id="center">center</div>
3 </div>
 1 #center{
 2     position:absolute;
 3     margin:auto;
 4     top:0;
 5     bottom:0;
 6     left:0;
 7     right:0;
 8 }
 9 
10 #parent{
11     position:relative;
12 }

方法2：table

table本来就是水平居中，只需设置垂直居中就可以了。

1 #parent{
2     display:table;
3 }
4 #center{
5     display:table-cell;
6     vertical-align:middle;
7 }

 参考资料：

三列布局
http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/
 
http://www.w3cplus.com/blog/104.html
 
等高布局
http://www.cnblogs.com/xiaohuochai/p/5457127.html
 
水平垂直居中
http://blog.csdn.net/wolinxuebin/article/details/7615098
http://blog.csdn.net/freshlover/article/details/11579669

css布局


联系
我们