左侧固定，右侧自适应

最新推荐文章于 2022-07-26 10:33:18 发布

渡梵尘

最新推荐文章于 2022-07-26 10:33:18 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/lx_dfc/article/details/81279244

版权

方法一： <style> .box1{ width: 100px; height: 500px; float: left; background-color: red; } .box2{ margin-left: 100px; height: 500px; background-color: blue; } </style> <body> <div class="box1"></div> <div class="box2"></div> </body>

方法二：<style> .box1{float: left;width: 300px;height: 150px;background: red;} .box2{background: yellow;height: 150px;overflow: auto;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body>

方法三：<style> .box{display: table;width: 100%;} .box1{width: 300px;height: 150px;background: red;display: table-cell;} .box2{background: green;height: 150px;display: table-cell;} </style> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body>

方法四：<style> .box1{width: 20%;height: 150px;background: red; float: left;} .box2{width: 80%;background: green;height: 150px;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body>

方法五：<style> .box{display: flex;} .box1{flex: 1; width: 200px;height: 150px;background: red; } .box2{ flex:4;background: green;height: 150px;} </style> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body>

方法六：<style> .box{position: relative;} .box1{position: absolute; width: 200px;height: 150px;background:yellow; left: 0;} .box2{ padding-left:200px;background: green;height: 150px;} </style> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body>