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>

 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         }