[链接](https://blog.csdn.net/baidu_36065997/article/details/80279305) [链接](https://www.jianshu.com/p/267239f8e4b2) ## **一栏固定宽度，一栏自适应** - 左侧float:left;右侧margin-left; ```CSS body,div{padding: 0 ;margin:0;} .left,.right{height: 200px;} .left{float: left;width: 200px;background-color:skyblue;} .right{margin-left: 200px; background-color: greenyellow;} ``` - 左侧float:left; 右侧overflow:hidden； 触发块级格式化上下文（BFC）-- 下边距不发生折叠；可以清除浮动；可以阻止元素被覆盖 ```CSS body,div{padding: 0 ;margin:0;} .left,.right{height: 200px;} .left{float: left;width: 200px;background-color:skyblue;} .right{overflow:hidden; background-color: greenyellow;} ``` - 绝对定位实现—absolute ```CSS .wrap{position : relative; } .left{ width: 200px; } .right{ position: absolute; top: 0; left: 200px; right: 0} ``` - 弹性布局 ```CSS body,div{padding: 0 ;margin:0;} .wrap{display: flex;} .left,.right{height: 200px;} .left{width: 200px;background-color:skyblue;} .right{flex: 1; background-color: greenyellow;} ``` ## **一栏不定宽，一栏自适应** 左侧的宽度就会随着里面内容的大小而缩放 - 左侧float:left; 右侧overflow:hidden； ```CSS body,div{padding: 0 ;margin:0;} .left,.right{height: 200px;padding: 10px;} .left{float: left;background-color:skyblue;} .right{overflow:hidden;background-color: yellow;} ``` - 弹性布局 ```CSS body,div{padding: 0 ;margin:0;} .wrap{display:flex;} .left,.right{height: 200px;padding: 10px;} .left{background-color:skyblue;} .right{flex:1;background-color: yellow;} ``` ## **两栏等高** 如果不设置高度，并且两栏里面的内容高度不一样 - 利用flex ```CSS .wrap{display:flex;} .left{background-color:skyblue;} .right{background-color: yellow;} ``` ## 左右宽度比为1：2，右边又分为上下结构且等高 ```CSS <div class="wrap"> <div class='left'>left</div> <div class='right'> <div class="rigTop"> rigTop </div> <div class="rigBot"> rigBot </div> </div> </div> .wrap{display: flex;} .left{width： 33.3%;} .right{flex: 1;} .rigTop, .rigBot{height: 50%;} ```