左邊固定寬，右邊自適應的6種方法

這是一道面試題，你有多少種辦法呢？

這裡我們假設左邊名為 left，寬度為 200 px，右邊名為 right。即預設

.left {
  width: 200px;
}

我的理解分四大類

• flex 佈局

  • 需設定父元素高度

• grid 佈局

  • 需設定父元素高度

• 絕對定位

  • 雙子元素 absolute

    • 不需要設定父元素高度
    • 子元素都設定高度，右邊子元素 left：200px + width: 100%

  • 左元素 absolute + 右元素 margin-left

    • 不需要設定父元素高度
    • 子元素都設定高度，右邊子元素 margin-left: 200px + width: 100%

• float 浮動

  • 左元素左浮動，右元素不動

    • 無需父元素
    • 左元素需設定寬高和浮動，右元素設定高度即可

  • 左元素左浮動，右元素右浮動

    • 無需父元素
    • 左元素設定寬高和左浮動，右元素設定右浮動以及高和寬（width: calc(100% - 200px)）

flex 佈局

需要一個父元素做 flex 佈局，且需要給它一個高度（撐開容器）

.father {
  display: flex;
  height: 200px;
}
.right {
  flex: 1;
}

grid 佈局

高階的佈局方式，子元素不需要設定寬度，單單設定父元素屬性即可。

.grid {
  display: grid;
  grid-template-columns: 200px 100%;
  height: 200px;
}

雙子元素 + absolute

需要給子元素設定寬高，不然撐不起來。右元素設定left: 200px

.father {
  position: relative;
  height: 200px;
}
.left {
  position: absolute;
  height: 200px;
}
.right {
  position: absolute;
  left: 200px;
  height: 200px;
  width: 100%;
}

左元素 absolute + 右元素 margin-left

.father {
  position: relative;
  height: 200px;
}
.left {
  position: absolute;
  width: 200px;
  height: 200px;
}
.right {
  width: 100%;
  height: 200px;
  margin-left: 200px;
}

無父元素 + 左元素左浮動，右元素不動

前兩種都需要有個父元素，但浮動不需要

左邊浮動，下一個元素獨佔位置，並排一行

同樣，需要設定高度，子元素才能撐開

.left {
  float: left;
  height: 200px;
}
.right {
  height: 200px;
}

無父元素 + 左邊左浮動，右邊有浮動

浮動不需要父元素，浮動就區別於正常文件流

我的理解是正常文件流是二維層面，而浮動相當於成了三維，區別於 Z 軸

右邊元素有浮動不夠，還需要設定寬度

.left {
  float: left;
  height: 200px;
}

.right {
  float: right;
  height: 200px;
  width: calc(100% - 200px);
}

只要是 float 實現此功能的，都不需要父元素，以及自身都需要設定高度

總結

簡單來說，實現佈局最好的方式是 flex，簡單相容現代瀏覽器和機型。當然，我是因為還沒有學 grid（但 grid 要記得引數比較多）。絕對定位和浮動各有優缺點

float 區別於其他三種，不需要父元素做容器

grid 區別於其他三種，不需要設定子元素（左元素的）寬

絕對定位區別於其他三種，它的方法不僅要父元素有高，其子元素也要有高

flex 最簡單

附上線上 demo

本文參與了 SegmentFault 思否徵文「如何“反殺”面試官？」，歡迎正在閱讀的你也加入。