三栏布局妙招尽囊：十种实现方法，惊艳面试官

2023-05-07 19:18:55

三栏布局：面试官的最爱，实现的十种方法

三栏布局，将页面分为三个纵向区域，是面试中常见的问题。如果你能侃侃而谈十种实现方法，绝对会给面试官留下深刻印象。

根据中间栏的渲染顺序，三栏布局可分为三类：

一、中间栏先渲染

1. HTML float

float属性让中间栏浮动，左右栏随后依次排列。简单易用，但需显式设置父元素高度或overflow: hidden;。

<div class="wrapper">
  <div class="left-bar">Left</div>
  <div class="main-bar">Main</div>
  <div class="right-bar">Right</div>
</div>

.left-bar, .right-bar {
  float: left;
  width: 200px;
}

.main-bar {
  float: right;
  width: calc(100% - 400px);
}

2. CSS flexbox

flexbox的flex-direction: row;让元素水平排列，flex属性控制伸缩比例。灵活，可实现复杂布局。

<div class="wrapper">
  <div class="left-bar">Left</div>
  <div class="main-bar">Main</div>
  <div class="right-bar">Right</div>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
}

.left-bar, .right-bar {
  width: 200px;
}

.main-bar {
  flex: 1;
}

3. CSS grid

grid布局定义列宽，grid-area属性放置元素。简洁直观，兼容性可能有限。

<div class="wrapper">
  <div class="left-bar">Left</div>
  <div class="main-bar">Main</div>
  <div class="right-bar">Right</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

.left-bar {
  grid-area: 1 / 1 / 3 / 2;
}

.main-bar {
  grid-area: 1 / 2 / 3 / 3;
}

.right-bar {
  grid-area: 1 / 3 / 3 / 4;
}

二、左栏先渲染

4. HTML table

表格结构实现三栏布局，中间栏为表格主体，左右栏为表格标题。简单直观，灵活性较差。

<table>
  <thead>
    <tr>
      <th>Left</th>
      <th>Main</th>
      <th>Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Left content</td>
      <td>Main content</td>
      <td>Right content</td>
    </tr>
  </tbody>
</table>

5. CSS inline-block

元素设置为inline-block，margin属性控制间距。简单易用，但元素间隙可能不均匀。

<div class="wrapper">
  <div class="left-bar">Left</div>
  <div class="main-bar">Main</div>
  <div class="right-bar">Right</div>
</div>

.left-bar, .main-bar, .right-bar {
  display: inline-block;
}

.main-bar {
  margin: 0 20px;
}

6. CSS columns

columns属性将元素排列为多列，column-gap属性控制列间隙。简单直观，兼容性可能有限。

<div class="wrapper">
  <div class="left-bar">Left</div>
  <div class="main-bar">Main</div>
  <div class="right-bar">Right</div>
</div>

.wrapper {
  columns: 3 auto;
  column-gap: 20px;
}

三、右栏先渲染

7. HTML position

position属性绝对定位中间栏，left和right属性控制其位置。简单易用，但绝对定位元素脱离文档流。

<div class="wrapper">
  <div class="left-bar">Left</div>
  <div class="main-bar">Main</div>
  <div class="right-bar">Right</div>
</div>

.main-bar {
  position: absolute;
  left: 200px;
  right: 200px;
}

8. CSS absolute

absolute属性绝对定位中间栏，top和bottom属性控制其位置。与position: absolute类似，但绝对定位元素脱离文档流。

<div class="wrapper">
  <div class="left-bar">Left</div>
  <div class="main-bar">Main</div>
  <div class="right-bar">Right</div>
</div>

.main-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 200px;
}

9. CSS fixed

fixed属性固定中间栏在视口位置，页面滚动时始终保持不动。简单易用，但固定定位元素可能会遮挡其他元素。

<div class="wrapper">
  <div class="left-bar">Left</div>
  <div class="main-bar">Main</div>
  <div class="right-bar">Right</div>
</div>

.main-bar {
  position: fixed;
  left: 200px;
  right: 200px;
}

10. Bootstrap

Bootstrap的栅格系统实现三栏布局。预定义栅格类轻松创建响应式布局。简单易用，但会增加额外CSS代码。

<div class="container">
  <div class="row">
    <div class="col-md-2">Left</div>
    <div class="col-md-8">Main</div>
    <div class="col-md-2">Right</div>
  </div>
</div>