css 双飞翼布局（flex 、float）和圣杯布局

最新推荐文章于 2024-08-21 10:36:09 发布

landl_ww

最新推荐文章于 2024-08-21 10:36:09 发布

阅读量2.3k

点赞数

分类专栏： CSS 文章标签： CSS 双飞翼圣杯布局 flex

本文链接：https://blog.csdn.net/landl_ww/article/details/80505959

版权

本文介绍了CSS中的双飞翼布局和圣杯布局，两者都是实现两边顶宽、中间自适应的三栏布局。双飞翼布局通过浮动和指定宽度使左右栏位于中间栏两侧，而圣杯布局则利用相对定位调整左右栏位置，确保内容不被遮挡。文章详细阐述了两种布局的实现步骤，并指出它们在浏览器兼容性上的优势。

摘要由CSDN通过智能技术生成

双飞翼布局

双飞翼布局，是一种页面布局的形象的表达。具体表现形式为两边顶宽，中间自适应宽度的三栏布局，中间栏要放在HTML文档流的最前，优先渲染

实现方式

float 浮动流

页面基本布局很简单，总共有三栏，中间栏位于文档流的最前面，优先渲染

```
  <body>
    <section class="container">
      <div class="main"> // 中间栏，位于文档流的最前面
        <div class="main-inner"> // 中间栏内容
        </div>
      </div>
      <div class="sub"></div> // sub 左边栏
      <div class="extra"></div> // extra 右边栏
    </section>
  </body>

```

为方便显示，清除margin和padding, 指定高度给container,指定背景颜色给三栏

  /* 清除margin和padding */

  * { 
    margin: 0;
    padding: 0;
  }
  /* 方便显示效果，指定高度，这里应该内容自动撑高 */

  .container {
    height: 600px;
  }
  .main {
    background: red;
  }
  .sub {
    background: blue;
  }
  .extra {
    background: yellow;
  }

三栏全部左浮动，指定高度

  /* 三栏都左浮动，指定高度 */
  .main, .sub, .extra {
    float: left;
    height: 100%;
  }

中间栏宽度100%，占满所有宽度，排在第一行
```
  .main {
    width: 100%;
  }
```
sub 左边栏指定宽度 150px, 这个时候，因为 main 中间栏已经占满所有宽度，所以 sub 左边栏被挤出屏幕，又因为之前统一左浮动，所以，
所以 sub 从 main 下面，第二行排列，为了 sub 左边栏能够排到第一行的最左边， sub</