圣杯布局、双飞翼布局以及Flex_flex圣杯布局-CSDN博客

本文链接：https://blog.csdn.net/everyStudy/article/details/142064146

圣杯布局

实现方法

1、HTML 结构中，中间内容区域优先渲染。

2、使用 float 使三列浮动。

3、对左右两列使用负边距，使其上浮到中间列的两侧。

4、使用相对定位调整左右两列的位置。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>圣杯布局示例</title>
    <style>
      body {
        min-width: 550px;
      }
      #container {
        padding-left: 200px;
        padding-right: 150px;
      }
      #container .column {
        float: left;
      }
      #center {
        width: 100%;
      }
      #left {
        width: 200px;
        margin-left: -100%;
        position: relative;
        right: 200px;
      }
      #right {
        width: 150px;
        margin-right: -150px;
      }
      #footer {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div id="header">Header</div>
    <div id="container">
      <div id="center" class="column">Center</div>
      <div id="left" class="column">Left</div>
      <div id="right" class="column">Right</div>
    </div>
    <div id="footer">Footer</div>
  </body>
</html>

双飞翼布局

实现方法

1、HTML 结构中，中间内容区域优先渲染，并包含一个内部容器。

2、使用 float 使三列浮动。

3、对左右两列使用负边距，使其上浮到中间列的两侧。

4、使用内部容器的 margin 为左右两列腾出空间。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>双飞翼布局示例</title>
    <style>
      body {
        min-width: 550px;
      }
      .column {
        float: left;
      }
      #main {
        width: 100%;
      }
      #main-wrap {
        margin: 0 190px 0 190px;
      }
      #left {
        width: 190px;
        margin-left: -100%;
      }
      #right {
        width: 190px;
        margin-left: -190px;
      }
    </style>
  </head>
  <body>
    <div id="header">Header</div>
    <div id="main" class="column">
      <div id="main-wrap">Center</div>
    </div>
    <div id="left" class="column">Left</div>
    <div id="right" class="column">Right</div>
    <div id="footer">Footer</div>
  </body>
</html>

Flex 布局

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Flex 三栏布局示例</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }
      #header,
      #footer {
        background-color: #f0f0f0;
        padding: 20px;
      }
      #content {
        display: flex;
        flex: 1;
      }
      #left,
      #right {
        background-color: #e0e0e0;
        width: 200px;
      }
      #left {
        order: -1;
      }
      #center {
        flex: 1;
        background-color: #d0d0d0;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="header">Header</div>
    <div id="content">
      <div id="center">Center</div>
      <div id="left">Left</div>
      <div id="right">Right</div>
    </div>
    <div id="footer">Footer</div>
  </body>
</html>