Toc
  1. 要点
  2. 圣杯布局
    1. DOM 结构
  3. 双飞翼布局
    1. DOM 结构
  4. 比对
  5. Flex 实现
Toc
0 results found
Utone
圣杯、双飞翼布局
2020/09/30

要点

  1. 两侧宽度固定,中间宽度自适应
  2. 中间部分在 DOM 结构上优先,以便先行渲染
  3. 允许三列中的任意一列成为最高列

圣杯布局

  1. 设置container的左右padding,为左右元素预留空间
  2. 设置leftmargin-left100%,使其与 center 在同一行
  3. 设置leftrelativeleft偏移量为负的自身宽度,使其到达左侧预留位置
  4. 设置rightmargin-right为负的自身宽度,使其到达右侧预留位置

DOM 结构

使用container将整体包裹,dom 结构更加直观

<div class="header"></div>
<div class="container">
  <div class="center column">center</div>
  <div class="left column">left</div>
  <div class="right column">right</div>
</div>
<div class="footer"></div>
<style>
  body {
    min-width: 400px;
  }

  .header,
  .footer {
    width: 100%;
    height: 100px;
    background-color: khaki;
  }

  .container {
    overflow: hidden;
    padding-left: 100px;
    padding-right: 200px;
  }

  .column {
    float: left;
  }

  .center {
    width: 100%;
    background-color: mediumpurple;
  }

  .left {
    width: 100px;
    margin-left: -100%; /* 失败百分比 */
    background-color: lightblue;
    position: relative;
    left: -100px;
  }

  .right {
    width: 200px;
    margin-right: -200px; /* 使用px,而不是百分比 */
    background-color: lightseagreen;
  }
</style>

双飞翼布局

container只将center包裹,作为鸟的身体

leftright在两侧,作为鸟的翅膀

双飞翼这个词很形象

DOM 结构

只使用div包裹center

<div class="header"></div>
<div class="container column">
  <div class="center">center</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>
<div class="footer"></div>
  1. colum提升到container
  2. 设置colum左浮动
  3. 设置center的 margin,为左右流出空间
  4. 设置leftmargin-left-100%,将left放置左侧预留位置
  5. 设置rightmargin-left为负的自身长度,将right放置右侧预留位置
  6. body 的min-width就是左右元素的宽度和300px
<style>
  body {
    min-width: 300px;
  }

  .header,
  .footer {
    width: 100%;
    height: 100px;
    background-color: khaki;
  }

  .footer {
    clear: both;
  }

  .column {
    float: left;
  }

  .container {
    width: 100%;
  }

  .center {
    margin-left: 100px;
    margin-right: 200px;
    background-color: mediumpurple;
  }

  .left {
    width: 100px;
    margin-left: -100%;
    background-color: lightblue;
  }

  .right {
    width: 200px;
    margin-left: -200px;
    background-color: lightseagreen;
  }
</style>

比对

  1. 圣杯布局,DOM 结构更加自然合理,但使用了相对定位,代码稍多点
  2. 双飞翼,CSS 代码简洁,允许的页面的最小宽度也小点
  3. 兼容性很好

Flex 实现

  1. 设置left的项目属性order-1,将其放置最左侧
  2. flex-grow设置为0,不放大
  3. flex-shrink设置为0,不缩小
  4. flex-basis设置为固定宽度
  5. DOM 结构与圣杯布局一致
<div class="header"></div>
<div class="container">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer"></div>
<style>
  .header,
  .footer {
    width: 100%;
    height: 100px;
    background-color: khaki;
  }

  .container {
    display: flex;
  }

  .center {
    width: 100%;
    background-color: mediumpurple;
  }

  .left {
    order: -1;
    flex: 0 0 100px;
    background-color: lightblue;
  }

  .right {
    flex: 0 0 200px;
    background-color: lightseagreen;
  }
</style>
打赏
支付宝
微信
本文作者:Utone
版权声明:本文首发于Utone的博客,转载请注明出处!