css布局之双飞翼布局

双飞翼布局:为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。

 实现思路

  1.首先创建一出dom文档结构如下:

css布局之双飞翼布局
1 <div class="container">
2         <div class="center">
3             <p>主体内容区</p>
4         </div>
5         <div class="left"></div>
6         <div class="right"></div>
7 </div>
View Code

  2.设置各列的宽度和浮动,为左右两列留出空间

css布局之双飞翼布局
 1 * {
 2             margin: 0;
 3             padding: 0;
 4         }
 5         
 6         .center {
 7             height: 100px;
 8             width: 100%;
 9         }
10         
11         .center,
12         .left,
13         .right {
14             float: left;
15         }
16         
17         .center p {
18             height: 100%;
19             background-color: yellow;
20             padding: 0 220px 0 200px;
21         }
22         
23         .left {
24             width: 200px;
25             height: 100px;
26             margin-left: -100%;
27             background-color: blue;
28         }
29         
30         .right {
31             width: 220px;
32             height: 100px;
33             margin-left: -220px;
34             background-color: green;
35         }
View Code

 

  

 

css布局之双飞翼布局

上一篇:css属性简写


下一篇:web中的HTML CSS