左側固定寬右側自適應布局和右側固定寬左側自適應布局


左側固定寬右側自適應布局:

浮動布局:左邊浮動,右邊加margin-left的值,讓它實現左邊固定,右側自適應布局.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;}
 8         .left{float:left;width:200px;height:300px;background-color:salmon;}
 9         .right{margin-left:200px;height:300px;background-color:goldenrod;}
10     </style>
11 </head>
12 <body>
13 <div class="left"></div>
14 <div class="right"></div>
15 </body>
16 </html>

截圖:

右側固定寬左側自適應布局:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;}
 8         .left{margin-right:200px;height:300px;background-color:goldenrod;}
 9         .right{float:right;width:200px;height:300px;background-color:salmon;}
10     </style>
11 </head>
12 <body>
13 <div class="right"></div>
14 <div class="left"></div>
15 </body>
16 </html>

效果截圖:


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com