关闭

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

492人阅读 评论(0) 收藏 举报
分类:

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

每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度,我们可以看到红色区域不发生改变,红色区域随着黄色区域宽度的改变而改变。
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. 方法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;}

效果图:
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4510次
    • 积分:186
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类