CSS-兩欄佈局

兩欄佈局（一側固定寬度，一側自適應），在工做中應該是常用到，能夠說是前端基礎了。然而在一次面試中，面試官：在紙上寫出你能想到的兩欄佈局全部方式。我心想：這還不簡單。仔細想了想...猝！

話很少說，上菜！

• 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就行。

此外留給你們一個思考題，還有沒有其餘方式呢？