左边宽度固定，右边自适应（方法3）

最新推荐文章于 2024-09-15 21:53:51 发布

LuckXinXin

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量126

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/LuckXinXin/article/details/113736757

版权

CSS布局固定宽度自适应宽度前端开发 HTML结构

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

293 篇文章 3 订阅

订阅专栏

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

html结构

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

在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中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;
}