# 三栏布局的实现方式

# 绝对定位

HTML

<body>
  <main>
    <aside class="left">left</aside>
    <article class="middle">middle</article>
    <aside class="right">right</aside>
  </main>
</body>

CSS

* {
  padding: 0;
  margin: 0;
}

main {
  width: 50vw;
  height: 100vh;
  margin: 0 auto;
  border: solid 2px #eee;
  position: relative;
}

main > * {
  height: 100%;
}

.left {
  width: 200px;
  position: absolute;
  left: 0;
  background-color: #3498db;
}

.right {
  width: 200px;
  position: absolute;
  right: 0;
  background-color: #16a085;
}

.middle {
  position: absolute;
  left: 200px;
  right: 200px;
  background-color: #bdc3c7;
}

# float布局

HTML

<!-- 注意元素排布：左 右 中 -->
<body>
  <main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
    <article class="middle">middle</article>
  </main>
</body>

CSS

* {
  padding: 0;
  margin: 0;
}

main {
  width: 50vw;
  height: 100vh;
  margin: 0 auto;
  border: solid 2px #eee;
}

main > * {
  height: 100%;
}

.left {
  width: 200px;
  float: left;
  background-color: #3498db;
}

.right {
  width: 200px;
  float: right;
  background-color: #16a085;
}

.middle {
  overflow: hidden;
  background-color: #bdc3c7;
}

# flex布局

html

<body>
  <main>
    <aside class="left">left</aside>
    <article class="middle">middle</article>
    <aside class="right">right</aside>
  </main>
</body>

css

* {
  padding: 0;
  margin: 0;
}

main {
  width: 50vw;
  height: 100vh;
  margin: 0 auto;
  border: solid 2px #eee;
  display: flex;
}

main > * {
  height: 100%;
}

.left {
  width: 200px;
  background-color: #3498db;
}

.right {
  width: 200px;
  background-color: #16a085;
}

.middle {
  flex-grow: 1;
  background-color: #bdc3c7;
}

# grid布局

html

<body>
  <main>
    <aside class="left">left</aside>
    <article class="middle">middle</article>
    <aside class="right">right</aside>
  </main>
</body>

css

* {
  padding: 0;
  margin: 0;
}

main {
  width: 50vw;
  height: 100vh;
  margin: 0 auto;
  border: solid 2px #eee;
  display: grid;
  grid-template-columns: 200px auto 200px;
}

main > * {
  height: 100%;
}

.left {
  background-color: #3498db;
}

.right {
  background-color: #16a085;
}

.middle {
  background-color: #bdc3c7;
}

# table布局

html

<body>
  <main>
    <aside class="left">left</aside>
    <article class="middle">middle</article>
    <aside class="right">right</aside>
  </main>
</body>

css

* {
  padding: 0;
  margin: 0;
}

main {
  width: 50vw;
  height: 100vh;
  margin: 0 auto;
  border: solid 2px #eee;
  display: table;
}

main > * {
  height: 100%;
}

.left {
  display: table-cell;
  width: 200px;
  background-color: #3498db;
}

.right {
  display: table-cell;
  width: 200px;
  background-color: #16a085;
}

.middle {
  background-color: #bdc3c7;
}

实现效果：

← z-index 书写规范 →