收集的css布局
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?
轉載于:https://www.cnblogs.com/mingwaer/p/3643387.html
總結
- 上一篇： 最喜欢的博客书签和站内短信系统
- 下一篇： 一步步学习微软InfoPath2010和