三栏布局实现

三栏布局

实现三栏布局有7种方式

1.flex

body {
  margin: 0;
}
.container {
  display: flex;
  min-width: 400px;
}
.container .left,
.container .right {
  width: 100px;
  height: 200px;
  background-color: red;
}
.container .main {
  flex: 1;
  background-color: blue;
}
<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

2.浮动 + margin

body {
  margin: 0;
}
.container {
  min-width: 400px;
}
.container .left,
.container .right {
  width: 100px;
  height: 200px;
  background-color: red;
}
.container .left {
  float: left;
}
.container .right {
  float: right;
}
.container .main {
  height: 200px;
  margin: 0 100px;
  background-color: blue;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
  <!-- 注意这种方式main容器药房最后面 -->
</div>;

3.浮动 + bfc

body {
  margin: 0;
}
.container {
  min-width: 400px;
}
.container .left,
.container .right {
  width: 100px;
  height: 200px;
  background-color: red;
}
.container .left {
  float: left;
}
.container .right {
  float: right;
}
.container .main {
  height: 200px;
  display: flex;
  /* 触发bfc  边框盒不会与浮动元素重叠*/
  /* 
  1.浮动元素
  2.绝对定位元素(absolute,fixed)
  3.display(inline-block,flex)
  4.overflow(不为visible)
   */
  background-color: blue;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
  <!-- 注意这种方式main容器药房最后面 -->
</div>;

4.table-cell

body {
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  min-width: 400px;
}
.container .left,
.container .right {
  display: table-cell;
  width: 100px;
  height: 200px;
  background-color: red;
}
.container .main {
  display: table-cell;
  height: 200px;
  background-color: blue;
}
<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>;

5.定位 + margin

body {
  margin: 0;
}
.container {
  position: relative;
  width: 100%;
  min-width: 400px;
}
.container .left,
.container .right {
  position: absolute;
  top: 0;
  width: 100px;
  height: 200px;
  background-color: red;
}
.container .left {
  left: 0;
}
.container .right {
  right: 0;
}
.container .main {
  margin: 0 100px;
  height: 200px;
  background-color: blue;
}
<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>;

6.圣杯布局

注：达到最小宽度后，右边栏会被隐藏

body {
  margin: 0;
}
.container {
  margin: 0 100px;
  min-width: 400px;
}
.container .main {
  float: left;
  width: 100%;
  height: 200px;
  background-color: blue;
}
.container .left,
.container .right {
  position: relative;
  float: left;
  width: 100px;
  height: 200px;
  background-color: red;
}
.container .left {
  left: -100px;
  margin-left: -100%;
}
.container .right {
  right: -100px;
  margin-left: -100px;
}
<div class="container">
  <!-- 圣杯布局的main是主体要放第一位 -->
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>;

7.双飞翼布局

body {
  margin: 0;
}
.mainBox {
  float: left;
  width: 100%;
}
.mainBox .main {
  float: left;
  width: 100%;
  height: 200px;
  margin: 0 100px;
  background-color: blue;
}
.left,
.right {
  float: left;
  width: 100px; /*给固定宽度*/
  height: 200px;
  background-color: red;
}

.left {
  margin-left: -100%;
}
.right {
  margin-left: -100px;
}
<div class="mainBox">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>