1.两侧固定,中间自适应
<style> .left { float: left; width: 100px; height: 200px; background: red; } .right { float: right; width: 200px; height: 200px; background: blue; } .center { margin-left: 100px; margin-right: 200px; height: 300px; background: green; } </style> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> </body>
2.左侧固定,右侧自适应
<style> .left { float: left; width: 200px; height: 200px; background-color: red; } .right { height: 300px; background-color:lime; margin-left: 200px; } </style> <div class="container"> <div class="left"></div> <div class="right"></div> </div>
3.右侧固定,左侧自适应
<style> .left { height: 300px; background-color:lime; margin-right: 200px; } .right { float: right; width: 200px; height: 200px; background-color: red; } </style> <div class="container"> <div class="right"></div> <div class="left"></div> </div>