当前位置：首页 > java >正文

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

java 2025/5/14 6:38:41

目标：

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

圣杯布局

实现方法：

通过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;
}

双飞翼布局