双飞翼布局:为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。
实现思路:
1.首先创建一出dom文档结构如下:
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>
2.设置各列的宽度和浮动,为左右两列留出空间
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 }