css常用左侧固定右侧自适应布局两栏布局的方法
话不多说直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } /*1-1s 定位法*/ /*.one{ position: relative; } .one-left{ position: absolute; width: 200px; height: 500px; background: blue; } .one-right{ margin-left:200px; height: 300px; background: red; }*/ /*1-1e*/ /*1-2s 双inline-block+width的calc属性*/ /*.one{ font-size: 0; } .one-left{ display: inline-block; vertical-align: top; width: 200px; height: 500px; background: blue; } .one-right{ display: inline-block; vertical-align: top; width: calc(100% - 200px); height: 300px; background: red; }*/ /*1-2e*/ /*1-3s 双float+width的calc属性*/ /*.one-left{ float: left; width: 200px; height: 500px; background: blue; } .one-right{ float: left; width: calc(100% - 200px); height: 300px; background: red; }*/ /*1-3e*/ /*1-4s 利用flex布局*/ /*.one{ display: flex; } .one-left{ width: 200px; height: 500px; background: blue; } .one-right{ flex:1; height: 300px; background: red; }*/ /*1-4e*/ </style> </head> <body> <div class="one"> <div class="one-left"></div> <div class="one-right"></div> </div> </body> </html>