左边宽度固定,右边自适应(方法3)

左侧固定宽度,右侧自适应宽度的两列布局实现

html结构

<div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
</div>

在外层div(类名为outer)的div中,有两个子div,类名分别为leftright,其中left为固定宽度,而right为自适应宽度

方法3:将左侧div进行绝对定位,然后右侧div设置margin-left: 200px

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

上一篇:css常用水平垂直居中总结


下一篇:左边宽度固定,右边自适应(方法2)