左侧固定，右侧宽度自适应

最新推荐文章于 2022-04-12 17:17:14 发布

cindy_rain

最新推荐文章于 2022-04-12 17:17:14 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： css作业

本文链接：https://blog.youkuaiyun.com/cindy_rain/article/details/49952253

css作业专栏收录该内容

4 篇文章

订阅专栏

本文介绍两种实现固定宽度左侧栏和自适应宽度右侧栏的方法。通过浮动和绝对定位技术，使左侧栏宽度固定，右侧栏随浏览器窗口大小变化而变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化。

每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。
html部分

<div class="box1">
    <div class="divA">DIVA</div>
    <div class="divB">DIVB</div>
    <div class="divC">DIVC</div>
</div>
<div class="box2">
    <div class="divA">DIVA</div>
    <div class="divB">DIVB</div>
    <div class="divC">DIVC</div>
</div>

方法1
红色部分float:left;蓝色部分margin-left:150px;150px是红色部分的宽度。

*{margin:0;padding:0;}
.box1{width:500px;margin-left:100px;}
.box2{width:600px;margin-left:100px;margin-top:20px;}
.divA{width:150px;background:red;text-align:center;float:left;}
.divB{margin-left:150px;background:blue;text-align:center;}
.divC{background:yellow;text-align:center;}

效果图
这里写图片描述

注意：当蓝色部分不设置它的margin-left时；红色部分的宽度将会是黄色部分的宽度，然后把蓝色部分的内容挤到右边了。但是红色部分还会向效果图里那样，不过是把蓝色部分给遮挡了，当红色的高度比蓝色高度要高时，我们会发现这种效果：

这里写图片描述
2. 方法2
大框架box部分定位为position:relative;红色部分采用的时position:absolute;这两句话使得红色部分可以相对于大框架box绝对定位；所以设定left:0px;紧贴着大框架box；蓝色部分任然是marign-left:150px;如果省略了这句话，效果将和方法1中注意部分一样，这里就不分析了。

*{margin:0;padding:0;}
.box1{width:500px;margin-left:100px;position:relative;}
.box2{width:600px;margin-left:100px;
margin-top:20px;position:relative;}
.divA{width:150px;background:red;position:absolute;
left:0px;text-align:center;}
.divB{background:blue;margin-left:150px;
text-align:center;}
.divC{background:yellow;text-align:center;}

效果图：
这里写图片描述