圣杯布局和双飞翼布局虽然两者的实现方法略有差异，不过都遵循了以下要点：
两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的<div>标签
个人觉得使用flex布局更快更方便，不过不兼容ie
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 简单粗暴的样式重置 */
* {
margin: 0;
padding: 0;
border: none;
}
/* 头部样式 公用 */
.header-one, .header-two {
max-width: 1190px;
margin: 0 auto;
background-color: #ff006e;
}
.header-one img, .header-two img {
height: 50px;
width: auto;
border-radius: 50px;
display: block;
float: left;
margin-top: 5px;
margin-left: 20px;
}
.header-one a, .header-two a {
display: inline-block;
padding: 0 20px;
line-height: 60px;
color: #fff;
font-size: 1.1rem;
text-decoration: none;
}
/* 主体样式 公用 */
.main-one, .main-two {
max-width: 1190px;
height: 600px;
margin: 20px auto;
overflow: hidden;
}
/* 双飞翼布局样式 */
.main-one .main-one-con {
height: 100%;
width: 100%;
float: left;
}
.main-one .main-one-con div {
height: 100%;
margin: 0 200px;
background-color: #0094ff;
}
.main-one .left-one {
width: 200px;
height: 100%;
float: left;
margin-left: -100%;
background-color: #ff006e;
}
.main-one .right-one {
width: 200px;
height: 100%;
float: left;
margin-left: -200px;
background-color: #ff006e;
}
/* 圣杯布局样式 */
.main-two {
max-width: 790px;
padding: 0 200px;
}
.main-two-con {
float: left;
width: 100%;
height: 100%;
background-color: #0094ff;
}
.left-two {
float: left;
width: 200px;
height: 100%;
margin-left: -100%;
position: relative;
right: 200px;
background-color: #00ff21;
}
.right-two {
float: left;
width: 200px;
height: 100%;
margin-right: -200px;
background-color: bisque;
}
/* 底部样式 公用 */
.footer-one, .footer-two {
max-width: 1190px;
margin: 0 auto;
background-color: #ff006e;
padding: 10px 0;
}
.footer-one {
margin-bottom: 50px;
}
.footer-one p, footer-two p {
font-size: 1.1rem;
text-align: center;
line-height: 2;
color: #fff
}
</style>
</head>
<body>
<!-- 双飞翼布局 -->
<section>
<!-- 头部内容 -->
<div class="header-one">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" alt="LOGO" />
<a href="">网站首页</a>
<a href="">产品中心</a>
<a href="">成功案例</a>
<a href="">新闻资讯</a>
<a href="">关于我们</a>
</div>
<!-- 主体内容 -->
<div class="main-one">
<div class="main-one-con">
<div>网站内部内容</div>
</div>
<div class="left-one">左侧内容</div>
<div class="right-one">右侧内容</div>
</div>
<!-- 底部 -->
<div class="footer-one">
<p>PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p>Copyright 2014-2019 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9</p>
</div>
</section>
<!-- 圣杯布局 -->
<section>
<div class="header-two">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" alt="LOGO" />
<a href="">网站首页</a>
<a href="">产品中心</a>
<a href="">成功案例</a>
<a href="">新闻资讯</a>
<a href="">关于我们</a>
</div>
<div class="main-two">
<div class="main-two-con">网站内部内容</div>
<div class="left-two">左侧内容</div>
<div class="right-two">右侧内容</div>
</div>
<div class="footer-two">
</div>
</section>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
