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
