两栏布局方案
实现左侧固定, 右侧自适应的布局方案, 常见的几种, 写了一个各个方案实现效果的Demo, 可以通过这里查看: 预览
首先统一html结构
<div class="container">
<div class="left">
<p>这是左边的盒子</p>
</div>
<div class="right">
<p>这是右边的盒子</p>
</div>
</div>
复制代码
然后统一样式, 左侧固定宽度
.container {
padding: 10px;
border: 1px dashed #dedede;
}
.left {
width: 120px;
border: 2px solid #2DB3E4;
}
.right {
border: 2px solid #F37EC1;
}
复制代码
1. 双float方案
利用CSS的calc()
函数来计算右侧宽度值, 需要清除父容器的浮动
设置box-sizing: border-box;
是为了方便计算
.container::after {
content: "";
display: block;
clear: both;
}
.left, .right {
box-sizing: border-box;
float: left;
}
.right {
width: calc(100% - 120px);
}
复制代码
2. float + margin-left方案
block
的元素盒子的宽度具有填满父容器,并随着父容器的宽度自适应的流动特性。
并且 block元素和浮动元素并排时, block元素会忽视浮动元素
因此给左侧盒子浮动, 右侧设置margin-left保持距离即可
.container::after {
content: "";
display: block;
clear: both;
}
.left {
box-sizing: border-box;
float: left;
}
.right {
margin-left: 120px;
}
复制代码
3. absolute + margin-left
与方案2原理大致相同, absolute也是会脱离文档流
不用清除浮动, 但也带来了新的问题
- 父容器需要改变position
- 如果左侧盒子比右侧盒子高度, 那么左侧盒子会超出父容器高度
.left {
box-sizing: border-box;
position: absolute;
}
.right {
margin-left: 120px;
}
复制代码
4. float + BFC 方法
这种方法不用计算宽度, 原理是BFC可以阻止元素被浮动元素覆盖
.container::after {
content: "";
display: block;
clear: both;
}
.left {
float: left;
}
.right {
margin-left: 0;
overflow: auto;
}
复制代码
父容器需要清除浮动, 右侧盒子设置了overflow: auto;
形成了BFC
5. flex方案
flex可以说是最好的方案了
直接给右侧盒子设置flex: 1
, 即可自动填满宽度
.container {
display: flex;
}
.right {
flex: 1
}
复制代码