正文
CSS两列布局
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
方法1:左边设置绝对定位，右边设置左外边距，大小和左边的宽度相等
//CSS部分：
.contain{
position :relative;
height: 300px;
} .left{
position: absolute;
left:;
top:; width: 200px;
height: 300px;
background: red;
}
.right{
/*使用左外边距*/
margin-left: 200px;
height: 300px;
background: blue;
}//html部分：
<div class="contain">
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
</div>
方法2：左边设置左浮动，右边隐藏溢出的内容
.contain{
position :relative;
height: 300px;
}
.left{
float: left;
width: 300px;
height: 300px;
background:red;
}
.right{
overflow: hidden;
background: blue;
height: 300px;
}<div class="contain">
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
</div>
方法3：弹性布局
.contain{
display: flex;
}
.left{
width: 200px;
height: 200px;
background: red;
}
.right{
flex:;
height: 200px;
background:blue;
}
方法4：左右都设置浮动，width：calc（）
.contain {
position: absolute;
width: 100%;
height: 100%;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: #72e4a0;
}
.right {
float: left;
width: calc(100% - 200px);
height: 100%;
background-color: #9dc3e6;
}
最终结果：
