CSS三栏布局：圣杯布局、双飞翼布局

最新推荐文章于 2025-05-29 16:16:54 发布

木马啊

最新推荐文章于 2025-05-29 16:16:54 发布

阅读量432

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/u010419337/article/details/91676729

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了CSS布局中的两种经典方法——圣杯布局和双飞翼布局，用于实现左右两栏定宽，中间一栏自适应的三栏效果。圣杯布局依赖于padding和相对定位，而双飞翼布局则通过在中间栏增加一层DOM并利用margin自适应宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实三栏布局比较简单，而且方法也有很多。今天了解了一下传统的三栏布局方法：圣杯布局、双飞翼布局，本文简单记录一下。
所谓三栏布局，通常是指左右两栏定宽，中间一栏自适应页面宽度填满剩余空间的布局。

一、圣杯布局

<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>

这里有一点细节：主要内容部分，即中间栏dom放在了左右两栏dom之前，在dom树渲染的时候会被优先渲染。

div {
  text-align: center
}

.header, .footer {
  background: #FFEFC0;
  line-height: 100px;
}

.container {
  overflow: hidden;
  margin: 0 auto;
  background: #78A4FA;
  padding: 0 100px;
}

.center, .left, .right {
  float: left;
  min-height: 100px;
}

.left, .right {
  width: 100px;
  background: #5ADD94;
  position: relative;
}
.left {
  margin-left: -100%;
  left: -100px;
}
.right {
  margin-left: -100px;
  right: -100px;
}
.center {
  width: 100%;
  border: 1px solid #FFA710;
  box-sizing: border-box;
}

圣杯布局的原理是：
container设置了padding之后浮动子元素的宽度计算100%是相对于container的宽度- paddingLeft - paddingRight，同时利用relative定位将左右两栏调整到合适位置。

效果图:

二、双飞翼布局

dom结构与圣杯布局类似：

<div class="header">这是页头</div>
<div class="container">
  <div class="center">
    <div class="main-content">
      center
    </div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">这是页脚</div>

div {
  text-align: center
}

.header, .footer {
  background: #FFEFC0;
  line-height: 100px;
}

.container {
  overflow: hidden;
  margin: 0 auto;
  background: #78A4FA;
}

.center, .left, .right {
  float: left;
  min-height: 100px;
}

.left, .right {
  width: 100px;
  background: #5ADD94;
}
.left {
  margin-left: -100%;
}
.right {
  margin-left: -100px;
}
.center {
  width: 100%;
}
.main-content {
  min-height: 100px;
  margin: 0 100px;
  border: 1px solid #FFA710;
  box-sizing: border-box;
}