左侧固定宽右侧自适应布局和右侧固定宽左侧自适应布局

左侧固定宽右侧自适应布局:

浮动布局:左边浮动,右边加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>

效果截图:

posted @ 2016-08-31 15:56  SkyTeam_LBM  阅读(260)  评论(0)  编辑  收藏  举报