常用css两列布局汇总

浮动+margin

<div class="container">
    <div class="left">定宽</div>
    <div class="right">自适应</div>
</div>

/* 不给高度不行，不给宽度可以自适应 */
.container {
height: 300px;
}
.left {
float: left;
/* 定宽 */
width: 200px;
height: 100%;
background-color:chartreuse;
}

.right {
/* 不设置宽度自适应 */
height: 100%;
background-color:coral;
margin-left: 200px;
}

 

定位+margin

/* 不给高度不行，不给宽度可以自适应 */
.container {
    position: relative;
    height: 300px;
}
.left {
    position: absolute;
    left: 0;
    /* 定宽 */
    width: 200px;
    height: 100%;
    background-color:chartreuse;
}

.right {
    /* 不设置宽度自适应 */
    height: 100%;
    
    /* 方法一：margin-left: 200px(只设置边距也可以实现) */
    /* 方法二：定位*/
    position:absolute;
    left: 200px;
    right: 0;  /*不设置这个，宽度会缩在一起，不自适应展开*/

    background-color:coral;
}