左侧固定宽右侧自适应布局和右侧固定宽左侧自适应布局
左侧固定宽右侧自适应布局:
浮动布局:左边浮动,右边加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>
效果截图: