收集的css布局

浏览数：27 / 时间：2015年06月09日

 1 <title>左定宽，右自动</title>
 2 <style>
 3 body{margin:0px;padding:0px;}
 4 .box .left,.box .right{
 5     height:200px;line-height: 200px;text-align: center;
 6 }
 7 .box .left{
 8     float:left;width:200px;background-color:red;
 9 }
10 .box .right{
11     margin-left:210px;background-color: blue;
12 }
13 </style>
14 <body>
15     <div class="box">
16         <div class="left">左</div>
17         <div class="right">右</div>
18     </div>
19 </body>

 1 <title>左定宽，右自动(position+margin)</title>
 2 <style>
 3 body{margin:0px;padding:0px;}
 4 .box .left,.box .right{
 5     height:200px;line-height: 200px;text-align: center;
 6 }
 7 .box .left{
 8     position: absolute;width:200px;background-color:red;
 9 }
10 .box .right{
11     margin-left:210px;background-color: yellow;
12 }
13 </style>
14 <body>
15     <div class="box">
16         <div class="left">左</div>
17         <div class="right">右</div>
18     </div>
19 </body>

 1 <title>（两侧定宽，中间自适应）</title>
 2 <style>
 3 body{margin:0px;padding:0px;}
 4 .center,.left,.right{
 5     height:200px;line-height: 200px;text-align:center;
 6 }
 7 .left{
 8     float:left;width:200px;background-color:red;
 9 }
10 .right{
11     float:right;width:200px;background-color:yellow;
12 }
13 .center{
14     margin:0px 210px;background-color:blue;
15 }
16 </style>
17 <body>
18         <div class="left">左</div>
19         <div class="right">右</div>
20         <div class="center">中</div>
21 </body>

 1 <title>（两侧定宽，中间自适应）</title>
 2 <style>
 3 body{margin:0px;padding:0px;}
 4 .center,.left,.right{
 5     height:200px;line-height: 200px;text-align:center;
 6 }
 7 .left{
 8     position:absolute;top:0px;left:0px;width:200px;background-color:red;
 9 }
10 .right{
11     position:absolute;top:0px;right:0px;width:200px;background-color:yellow;
12 }
13 .center{
14     margin:0px 210px;background-color:blue;
15 }
16 </style>
17 <body>
18         <div class="left">左</div>
19         <div class="right">右</div>
20         <div class="center">中</div>
21 </body