话不多说直接上代码
<!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>
css常用左侧固定右侧自适应布局两栏布局的方法
原文地址：https://www.cnblogs.com/Jmosquito/p/10011513.html