实现左边固定右边自适应布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>左边固定右边自适应</title> <style type="text/css"> /* 定位+margin-left */ /* .box1 { float: left; width: 300px; height: 150px; background: red; } .box2 { margin-left: 300px; background: blue; height: 150px; } */ /* BFC布局 */ /* .box1 { float: left; width: 300px; height: 150px; background: red; } .box2 { background: yellow; height: 150px; overflow: auto; } */ /* table布局 */ /* .box { display: table; width: 100%; } .box1 { width: 300px; height: 150px; background: red; display: table-cell; } .box2 { background: green; height: 150px; display: table-cell; } */ /* flex布局 */ /* .box { height: 200px; overflow: hidden; border: 1px solid #000; display: flex; } .box1 { width: 200px; height: 200px; background: #ccc; } .box2 { height: 200px; background: #f60; flex: 1; } */ /* 定位+浮动+padding-left+ box-sizing */ /* .box { height: 200px; border: 1px solid #000; position: relative; overflow: hidden; } .box1 { width: 200px; height: 200px; background: #ccc; position: absolute; left: 0; top: 0; } .box2 { width: 100%; height: 200px; background: #f60; position: absolute; left: 200px; top: 0; padding-right: 200px; box-sizing: border-box; } */ /* 浮动 */ .box { height: 200px; border: 1px solid #000; } .box1 { width: 200px; height: 200px; background: #ccc; float: left; } .box2 { width: 100%; height: 200px; background: #f60; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
posted on 2018-08-20 17:23 Diamond_xx 阅读(153) 评论(0) 编辑 收藏 举报