css 实现两栏布局的优雅方式

 费德  2018/05/20 01:10  129 次

参考这篇文章: 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;
}

 作者:费德

少年费德的奇幻漂流

本博客如无特殊说明皆为原创,转载请注明来源:css 实现两栏布局的优雅方式

添加新评论