三栏布局-圣杯、双飞翼以及其他

2019-04-02

本文所指三栏布局为两侧宽度固定，中间宽度自适应的情况。

圣杯布局

圣杯布局通过父元素padding，子元素margin-left以及相对定位来实现。

情况1

html如下

<div class="content">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

css

查看代码


.content {
  padding: 0 200px;
  overflow: hidden;
}
.left,
.right,
.main {
  float: left;
  min-height: 100px;
  position: relative;
}
.left,
.right {
  width: 200px;
}
.left {
  background-color: blue;
  margin-left: -100%;
  left: -200px;
}
.right {
  background-color: red;
  margin-left: -200px;
  left: 200px;
}
.main {
  background-color: green;
  width: 100%;
}

情况2

html

<div class="content">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

css

.content {
  padding: 0 200px;
  overflow: hidden;
}

.left,
.right,
.main {
  float: left;
  min-height: 100px;
  position: relative;
}

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

.left {
  background-color: blue;
  margin-left: -100%;
  left: -200px;
}

.right {
  background-color: red;
  margin-left: -200px;
  left: 200px;
}

.main {
  background-color: green;
  width: 100%;
}

Flex布局

情况3

HTML和情况2相同

css

.content {
  display: flex;
  overflow: hidden;
}

.left,
.right,
.main {
  min-height: 100px;
}

.left,
.right {
  flex: 0 0 200px;
}

.left {
  background-color: blue;
  order: 0;
}

.right {
  background-color: red;
  order: 2;
}

.main {
  background-color: green;
  width: 100%;
  flex: 1;
  order: 1;
}

利用order来确定次序。

Grid布局

情况4

HTML和情况2相同

css

.content {
  display: grid;
  overflow: hidden;
  grid-template-columns: 200px auto 200px;
  grid-template-rows: auto;
  grid-template-areas: "left main right";
}

.left,
.right,
.main {
  min-height: 100px;
}

.left,
.right {
}

.left {
  grid-area: left;
  background-color: blue;
}

.right {
  grid-area: right;
  background-color: red;
}

.main {
  grid-area: main;
  background-color: green;
}

双飞翼

情况5

html

<div class="content">
  <div class="main">
    <div class="main-content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

css

.content {
  overflow: hidden;
}

.left,
.right,
.main {
  float: left;
  min-height: 100px;
  position: relative;
}

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

.left {
  background-color: blue;
  margin-left: -100%;
}

.right {
  background-color: red;
  margin-left: -200px;
}

.main {
  width: 100%;
}

.main-content{
  min-height: 100px;
  margin:0 200px;
  background-color: green;
}

利用中间的margin预留出左右两边的空间，再通过margin负值将左右两栏移到上方空处。