三栏布局实现

三栏布局

实现三栏布局有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>