CSS 三栏布局

[PolluxLee]

# 简单浮动

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

.main {
  width: 100%;
}

.content {
  height: 200px;
  margin-left: 240px;
  margin-right: 200px;
  background: blueviolet;
}

.left {
  width: 230px;
  height: 200px;
  float: left;
  margin-right: -230px;
  background: #FF0097;
}

.right {
  width: 190px;
  height: 200px;
  margin-left: -190px;
  float: right;
  background: #4EB3B9;
}

# 设置 margin 为负值 *

1. position 设置为 static

设置 margin-top/left: -100px 时，元素向上或向左移动

设置 margin-bottom/right: -100px 时，元素不会移动，后面的元素会向上或左移动并覆盖在当前元素之上

2. position 设置为 relative

设置 margin-top/left: -100px 时，元素向上或向左移动

设置 margin-bottom/right: -100px 时，元素不会移动，后面的元素会向上或左移动但不会覆盖当前元素

3. position 设置为 absolute

设置 margin-top/left: -100px 时，元素向上或向左移动

设置 margin-bottom/right: -100px 时，元素不会移动，不影响后面的元素

4. 设置 float 浮动

如果设置的 margin 的方向与浮动的方向相同，那么，元素会往对应的方向移动对应的距离

如果设置 margin 的方向与浮动的方向相反，则元素本身不动，元素之前或者之后的元素会向该元素的方向移动相应的距离并覆盖

# 双飞翼布局

left 盒子，浮动方向跟 margin 方向相同，自身移动相应距离，并覆盖前面的元素

right 盒子，浮动方向跟 margin 方向相反，自身不向 margin 方向移动，之前的元素移动相应距离

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

.main {
  float: left;
  width: 100%;
}
.content {
  height: 200px;
  margin-left: 110px;
  margin-right: 210px;
  background-color: blueviolet;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: #FF0097;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: #4EB3B9;
}

# 圣杯布局

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

.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 100px;
  background-color: blueviolet;
}
.left {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: #FF0097;
}
.right {
  float: right;
  width: 200px;
  height: 100px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: #4EB3B9;
}

# flex 弹性布局

主要是 flex 属性的使用，可参考 # 71

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

.container {
  display: flex;
}
.main {
  flex: 1 1 0px;
  height: 300px;
  background-color: blueviolet;
}
.left {
  order: -1;
  flex: 0 0 200px;
  margin-right: 20px;
  height: 300px;
  background-color: #FF0097;
}
.right {
  flex: 0 0 100px;
  margin-left: 20px;
  height: 300px;
  background-color: #4EB3B9;
}

# 绝对定位布局

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

.container {
  position: relative;
}
.main {
  height: 100px;
  margin: 0 120px;
  background-color: blueviolet;
}
.left {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  background-color: #FF0097;
}
.right {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #4EB3B9;
  right: 0;
  top: 0;
}

# 参考

https://segmentfault.com/a/1190000007184954

https://zhuanlan.zhihu.com/p/25070186?refer=learncoding

https://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html

https://codepen.io/chriscoyier/pen/vWEMWw