1、右边宽度固定，左边自适应
第一种(flex布局，不兼容IE9以下浏览器)：
<style> body { display: flex; } .left { background-color: aqua; height: 200px; flex: 1; } .right { background-color: bisaue; height: 200px; width: 100px; } </style> <body> <div class="left"></div> <div class="right"></div> </body>
第二种：
<style> div { height: 200px; } .left { float: right; background-color: aqua; width: 200px; } .right { background-color: bisaue; margin-right: 200px; } </style> <body> <div class="left"></div> <div class="right"></div> </body>
2、左边定宽，右边自适应：
<style> .left { float: left; width: 200px; background-color: aqua; height: 200px; } .right { background-color: bisque; height: 200px; } </style> <body> <div class="left"></div> <div class="right"></div> </body>