布局代码如下,文章统一使用布局
<body>
<div class="wrapper">
<div class="left">左侧宽度固定</div>
<div class="right">右侧宽度自适应</div>
</div>
</body>
方法一、
左侧左浮动,右侧margin-left
父容器使用
overflow: hidden
意在解决浮动之后高度塌陷的问题。
左侧使用左浮动,右侧设置margin-left
固定距离即可
效果图:
wrapper样式:
.wrapper {
height: 200px;
width: 100%;
background: aliceblue;
overflow: hidden;
}
左侧div样式
及右侧div样式
.left {
width: 200px;
height: 150px;
background: yellowgreen;
float: left;
}
.right {
height: 150px;
background: sienna;
margin-left: 200px;
}
方法二、
float + BFC方法
左侧浮动,但是右侧盒子通过overflow: auto;形成了BFC,因此右侧盒子不会与浮动的元素重叠。
wrapper样式:
.wrapper {
height: 200px;
width: 100%;
background: aliceblue;
overflow: hidden;
}
左侧div样式
及右侧div样式
.left {
width: 200px;
height: 150px;
background: yellowgreen;
float: left;
}
.right {
height: 150px;
background: sienna;
overflow: auto;
}
效果图:
方法三、
左侧绝对定位,右侧margin-left
父容器使用
position: relative
是为了给子元素一个参照
左侧使用position: absolute
,top,left
为0 是为了固定位置,右侧仍然设置margin-left
固定距离即可
效果图:
wrapper样式:
.wrapper {
height: 200px;
width: 100%;
background: aliceblue;
position: relative;
}
左侧div样式
及右侧div样式
.left {
width: 200px;
height: 150px;
background: yellowgreen;
position: absolute;
top: 0;
left: 0;
}
.right {
height: 150px;
background: sienna;
margin-left: 200px;
}
缺点:
- 使用了绝对定位,若是用在某个div中,需要更改父容器的position。
- 没有清除浮动的方法,若左侧盒子高于右侧盒子,就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。
方法四、
flex弹性布局
父容器设置
display: flex;
让子div成为容器方便管理
左侧固定宽度,右侧自动填充剩余空间
关于flex属性,不了解的可借此传送门 → 弹性布局 flex
效果图:
wrapper样式:
.wrapper {
height: 200px;
width: 100%;
background: aliceblue;
display: flex;
}
左侧div样式
及右侧div样式
.left {
width: 200px;
height: 150px;
background: yellowgreen;
flex: 0 0 200px;
}
.right {
height: 150px;
background: sienna;
flex: 1;
}