两栏布局（一侧固定宽度，一侧自适应），在工作中应该是常常应用到，能够说是前端根底了。然而在一次面试中，面试官：在纸上写出你能想到的两栏布局所有形式。我心想：这还不简略。认真想了想...猝！

话不多说，上菜！

  • absolute + margin 形式

<div class="container">    <div class="sidebar">固定</div>    <div class="main">自适应</div></div>
.container {  position: relative;}.sidebar {  position: absolute;  top: 0;  left: 0;  height: 300px;  width: 200px;  background: #67c23a;}.main {  margin-left: 200px;  height: 300px;  background: #e6a23c;}


批改 css 就可实现 地位调换，如下：

.sidebar {  right: 0;  /* ... */}.main {  margin-right: 200px;  /* ... */}


长处： 替换<div class="sidebar">固定</div> 、 <div class="main">自适应</div>程序 ，实现次要内容优先加载渲染。

毛病：absolute 定位，脱离文档流，当 sidebar 列的高度，超过 main 列的高度，会遮住上面的元素。须要给父盒子设置 overflow 属性。

  • float + margin 形式

<div class="container">    <div class="sidebar">固定</div>    <div class="main">自适应</div></div>
.sidebar {  float: left;  top: 0;  right: 0;  height: 300px;  width: 200px;  background: #67c23a;}.main {  margin-left: 200px;  height: 300px;  background: #e6a23c;}


也反对地位调换：

.sidebar {  float: right;  /* ... */}.main {  margin-right: 200px;  /* ... */}


毛病：不能实现次要内容优先加载渲染。

  • float + 负margin 形式

<div class="wrap">    <div class="main">自适应</div></div><div class="sidebar">固定</div>
.wrap {  float: left;  width: 100%;}.main {  margin-left: 200px;  height: 300px;  background: #e6a23c;}.sidebar {  float: left;  margin-left: -100%;  height: 300px;  width: 200px;  background: #67c23a;}


地位调换：

.main {  margin-right: 200px;  /* ... */}.sidebar {  float: right;  margin-left: -200px;  /* ... */}

  • flex 形式

<div class="container">    <div class="main">自适应</div>    <div class="sidebar">固定</div></div>
.container {  display: flex;}.main {  flex: 1;  height: 300px;  background: #e6a23c;}.sidebar {  flex: none;  /* height: 300px; */  width: 200px;  background: #67c23a;}

这里有一点须要留神：.sidebar没有设置高度，会和.container放弃一样的高度。.container的高度是被.main撑开的，也就是和.main高度一样。

地位调换：

.container {  display: flex;  flex-direction: row-reverse;}

  • grid 形式

<div class="container">    <div class="main">自适应</div>    <div class="sidebar">固定</div></div>
.container {  display: grid;  grid-template-columns: auto 200px;  grid-template-rows: 300px;}.main {  background: #e6a23c;}.sidebar {  background: #67c23a;}

这里.main和.sidebar高度不独自设置的话，也是同样的高度。

地位调换：

.container {  display: grid;  grid-template-columns: 200px auto;  grid-template-rows: 300px;  grid-template-areas: 'a b';}.main {  grid-area: b;  background: #e6a23c;}.sidebar {  grid-area: a;  background: #67c23a;}

  • float + BFC 形式

<div class="container">    <div class="sidebar">固定</div>    <div class="main">自适应</div></div>
.sidebar {  float: left;  width: 200px;  height: 300px;  background: #67c23a;}.main {  overflow: hidden;  height: 300px;  background: #e6a23c;}


地位调换：

.sidebar {  float: right; /* ... */}


这里让.main成为BFC次要是打消.sidebar因float带来的影响，只有能让.main成为BFC就行。

此外留给大家一个思考题，还有没有其余形式呢？