CSS经典布局之圣杯布局和双飞翼布局

news2025/7/19 3:39:21

目标：

中间自适应，两边定宽，并且三栏布局在一行展示。

圣杯布局

实现方法：

通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置；

给外部容器添加padding，通过相对定位调整左右两列的位置。

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

#header, #footer {
  background: rgba(29, 27, 27, 0.726);
  text-align: center;
  height: 60px;
  line-height: 60px;
  clear: both;
}
#container{
  padding: 0 200px;
  overflow: hidden;/*形成BFC撑开文档*/
}
.column{
  height: 200px;
  float: left;
  position: relative;
}
#center{
  width: 100%;
  background-color: tomato;
}
#left{
  width: 200px;
  margin-left: -100%; /* 把left移动到和center同一行并且左边对齐 */
  left: -200px; /* 再向左移动到main的padding区域,就不会挡住center了 */
  background-color: aqua;
}
#right{
  width: 200px;
  margin-left: -200px; /* 把right移动到和center同一行并且右边对齐 */
  right: -200px; /* 向右移动到右边的padding区域*/
  background-color: wheat;
}

圣杯布局效果

双飞翼布局

实现方法：

通过float+margin，不使用相对定位；

在中间层外面套一层div，加上margin将 center内容挤到中间

<div id="header">#header</div>

<div id="container">
  <div id="center" class="column">
    <div id="center-content">#center</div>
  </div>
  <div id="left" class="column">#left</div>
  <div id="right" class="column">#right</div>
</div>

<div id="footer">#footer</div>

#header, #footer {
  background: rgba(29, 27, 27, 0.726);
  text-align: center;
  height: 60px;
  line-height: 60px;
  clear: both;
}
.column{
  height: 200px;
  float: left;
}
#center{
  width: 100%;
  background-color: tomato;
}
#center-content{
  margin: 0 200px;
}
#left{
  width: 200px;
  margin-left: -100%; /* 作用和圣杯一样 */
  background-color: aqua;
 
}
#right {
  width: 200px;
  margin-left: -200px; /* 作用和圣杯一样 */
  background-color: wheat;
}

双飞翼布局