传统 PC 布局 实现方法

传统 PC 布局定义：两侧宽度固定，中间宽度自适应的三栏布局，实现中间部分先加载渲染

圣杯布局

涉及技术：定位position+浮动float

缺点：当middle<left宽度时, 会发生布局错乱; 解决办法 -> 外层div添加min-width=left宽度

实现思路

1、html结构：box(middle-left-right)，middle区域需要放在最前面
2、box盒子设置最小宽度min-width=left宽度；根据已知的left、right宽度给box设置左右padding: 0 right宽度 0 left宽度，预留出两侧区域
3、middle、left、right设置float，让三个盒子浮动在一行中
4、middle盒子宽度设置为100%，此时left、right盒子会因为空间不够被挤到下面
5、left盒子设置margin-left: -100%，让盒子移动到middle开头处；使用position定位，设置left值，让盒子移动到左侧空白区域
6、right盒子设置margin-left: -right宽度，让盒子移动到middle结尾处；使用position定位，设置right值，让盒子移动到右侧空白区域

关键代码

<div id="box" class="clearfix">
  <div id="middle">content</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>

#box {
  min-width: 200px;
  padding: 0 300px 0 200px;
}

#middle{
  float: left;
  width: 100%;
}

#left {
  position: relative;
  left: -200px;
  float: left;
  width: 200px;
  margin-left: -100%;
}

#right {
  position: relative;
  right: -300px;
  float: left;
  width: 300px;
  margin-left: -300px;
}

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

双飞翼布局

涉及技术：浮动float

缺点：middle盒子需要多加一层dom节点

实现思路

1、html结构: middle(>inner)-left-rigt，middle盒子里需要包含一个子盒子inner
2、inner盒子使用margin预留出左右位置 margin: 0 right宽度 0 left宽度
3、middle、left、right设置float，让三个盒子浮动在一行中
4、middle盒子宽度设置为100%，此时left、right盒子会因为空间不够被挤到下面
5、left盒子设置margin-left: -100%，让盒子移动到middle开头处
6、right盒子设置margin-left: -right宽度，让盒子移动到middle结尾处

关键代码

<div id="middle">
  <div id="inner">content</div>
</div>
<div id="left"></div>
<div id="right"></div>

#inner{
  margin: 0 300px 0 200px;
}

#middle{
  float: left;
  width: 100%;
}

#left {
  float: left;
  width: 200px;
  margin-left: -100%;
}

#right {
  float: left;
  width: 300px;
  margin-left: -300px;
}

绝度定位

涉及技术：绝对定位 position: absolute;

实现思路

1、html结构: box(middle-left-right)
2、middle盒子宽度设置为100%，使用margin预留出左右位置 margin: 0 right宽度 0 left宽度;
3、left、right盒子使用position: absolute绝对定位，固定到对应位置

关键代码

<div id="box">
  <div id="middle">content</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>

#box {
  position: relative;
}

#middle{
  width: 100%;
  margin: 0 300px 0 200px;
}

#left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
}

#right {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
}

flex布局

涉及技术：flex

缺点：部分浏览器存在兼容性问题

实现思路

1、html结构: box(middle-left-right)
2、left设置 order: -1, 让这个flex-item移动到最左边

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

3、middle设置 flex-grow: 1, 因为left和right定宽了有剩余空间, 1就可以铺满剩余空间, 默认是0

flex-grow属性定义项目的放大比例, 默认为0, 即如果存在剩余空间, 也不放大

关键代码

<div id="box">
  <div id="middle">content</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>

#box {
  display: flex;
}

#middle{
  flex-grow: 1;
}

#left {
  width: 200px;
  order: -1;
}

#right {
  width: 300px;
}