实现一个左右布局,左边固定宽度200px,右边实现宽度自适应的两列布局
下面分享下我的几种做法以及解释
首先我们先通用的布局样式:
<div>
<div class="fixed">固定200px</div>
<div class="auto">自动充满</div>
</div>
来个默认样式:
.fixed{
width: 200px;
height: 100px;
background: blueviolet; // 紫色
}
.auto{
background: goldenrod; // 黄色
height: 100px;
}
接下来在这个基础上一 一列举几种做法:
1. float
<div>
<div class="fixed l1">固定200px</div>
<div class="auto r1">自动充满</div>
</div>
.l1{
float: left;
}
.r1{
width: 100%;
padding-left: 200px;
box-sizing: border-box;
}
(给两个div添加两个类名 l1,r1,表示这是第一种做法)
由于 左边l1 浮动,脱离了正常流的规则,右边r1是个块级元素,所以会“无视”左侧的浮动,直接向父级的左侧靠拢,然后我们再加个padding-left: 200px;
把内容推出来即可
效果图(包括以下几种方法的效果都是这样):
2. 负margin
<div class="con-2">
<div class="fixed l2">固定200px</div>
<div class="auto r2">自动充满</div>
</div>
.con-2{
font-size: 0;
}
.l2{
display: inline-block;
font-size: 1rem;
position: relative;
}
.r2{
display: inline-block;
width: 100%;
margin-left: -200px;
padding-left: 200px;
box-sizing: border-box;
font-size: 1rem;
}
(给父盒子添加一个类名 con-2
)
首先,设置两个盒子为行块,这样就让他们处于同一行;为了解决中间产生空隙的问题,设置父盒子的字号为0,(空隙是代码换行引起的);然后我们让右边宽度100%,同时利用margin-left
为 -200px强行蹭到左侧去,再用padding-left: 200px;
把内容推出来,当然别忘了box-sizing: border-box;
。
这时基本就实现了,但是你会发现一个问题,右侧的把左侧覆盖了?!,所以得想办法让左侧的层级高于右侧,肯定有很多人首先想到z-index
,但是很可惜,两个都是正常流中的元素,z-index
并不起效果。最简单的办法就是让左侧position: relative;
,( 添加了position属性且值不为static的元素比相邻没有position属性的元素层级要高 ),这就大功告成了
3. positon定位
<div class="con-3">
<div class="fixed l3">固定200px</div>
<div class="auto r3">自动充满</div>
</div>
.con-3{
position: relative;
}
.l3{
position: relative;
z-index: 1;
}
.r3{
position: absolute;
right: 0;
top: 0;
width: 100%;
padding-left: 200px;
box-sizing: border-box;
}
(给父盒子添加一个类名 con-3
)
利用position定位,这个应该不难理解,给左侧 l3添加position: relative; z-index: 1;
是因为避免被右侧覆盖了(两个同样设置了position
,当左侧 z-index
>= 1时,该层级比没有设置z-index的要高)
4. flex
<div class="con-4">
<div class="fixed l4">固定200px</div>
<div class="auto r4">自动充满</div>
</div>
.con-4{
display: flex;
}
.l4{
flex-shrink: 0;
}
.r4{
width: 100%;
}
(给父盒子添加一个类名 con-4
)
利用 flex 应该是最爽最简单的了!我们知道当父盒子宽度不够分时,flex会自动压缩子盒子们,而左侧的flex-shrink: 0;
表示我不参与压缩,一直是200px
5. 利用BFC
<div>
<div class="fixed l5">固定200px</div>
<div class="auto r5">自动充满</div>
</div>
.l5{
float: left;
}
.r5{
overflow: hidden;
}
这也是个十分简单的方法,利用BFC特性:BFC的元素不能与浮动元素重叠
由于给右侧加了overflow: hidden;
使之变成一个BFC,所以不会和左侧的浮动发生重叠,盒子默认就是撑满屏幕,所以不用手动设置宽度。
还不了解BFC的可以看我另外一边文章:BFC
文中如有错还请大神指出~谢哈