css 实现两栏布局的优雅方式
参考这篇文章： https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/
假设我们有这样一段页面结构
<div class="wrapper" id="wrapper">
<div class="left">
左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。
</div>
<div class="right">
这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
基本的样式是，两个div相距20px, 左侧div宽 120px
</div>
</div>
1、float + BFC
.wrapper {
overflow: auto; // BFC
}
.wrapper .left {
float: left;
width: 100px;
}
.wrapper .right {
overflow: auto; // BFC
}
2、flex
.wrapper {
display: flex;
align-items: flex-start;
}
.wrapper .right {
flex: auto;
}作者：费德
最新文章
全部分类