公司项目需要使用两列布局,要求左右列宽度自适应,左列高度随着内容自动出现滚动条,网上的方案有很多种,研究了一下采用float+BFC的解决方案。
最终实现效果如图:
原理:
- 浮动元素的块状兄弟元素会无视浮动元素的位置,尽量占满一整行,这样该兄弟元素就会被浮动元素覆盖。
- 若浮动元素的块状兄弟元素为BFC,则不会占满一整行,而是根据浮动元素的宽度,占据该行剩下的宽度,避免与浮动元素重叠。
- 浮动元素与其块状BFC兄弟元素之间的margin可以生效,这将继续减少兄弟元素的宽度。
HTML代码:
<div class="parent">
<div class="left">
<div class="left__item"></div>
<div class="left__item"></div>
<div class="left__item"></div>
<div class="left__item"></div>
</div>
<div class="right">
<p>right</p>
</div>
</div>
CSS代码:
.parent {
overflow: hidden;
}
.left {
float: left;
max-height: 150px;
margin-right: 20px;
overflow-y: auto;
background-color: lightpink;
}
.left__item{
width: 180px;
height: 80px;
background-color: lightgreen;
}
.right {
overflow: hidden;
background-color: lightblue;
}
参考文章:《什么是BFC》