您的位置：首页 > 职场人生

圣杯布局和双飞翼布局

2017-08-30 20:18 302 查看

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

看了很多文章，发现有一篇文章的思路是最清晰的，所以专门转载一下：

http://www.jianshu.com/p/f9bcddb0e8b4

上述文章采用了圣杯布局：

即使用padding+position:relative的方式，配合right和left属性，防止中间div内容不被遮挡。

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{margin:0;
padding:0;}
header,footer{
text-align: center;
width: 100%;
background-color: #10903d;
height: 100px;
}
.container{
padding: 0 200px;
overflow: hidden;
min-height: 200px;
}
.middle,
.left,
.right{
float: left;
min-height: 200px;
}
.middle{
width: 100%;
background-color: #99CCCC;
}
.left,
.right{
width: 200px;
}
.left{
margin-left: -100%;
background-color: #FF9999;
position: relative;
left: -200px;
}
.right{
margin-left:-200px;
background-color: #996699;
position: relative;
right: -200px;
}
</style>
</head>

<body>
<header>我是顶部</header>
<section class="container">
<div class="middle">
我是自适应的内容区
我是自适应的内容区
我是自适应的内容区
我是自适应的内容区
我是自适应的内容区
</div>
<div class="left">我是左边固定框</div>
<div class="right">我是右边固定框</div>
</section>
<footer>我是尾部</footer>
</body>
</html>

双飞翼布局采用了在中间div内部创建子div用于放置内容，该子div中用margin-left和margin-right为左右两边栏div留出位置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
*{margin:0;
padding:0;}
header,footer{
text-align: center;
width: 100%;
background-color: #10903d;
height: 100px;
}
.container{
/* padding: 0 200px; */
overflow: hidden;
min-height: 200px;
}
.middle,
.left,
.right{
float: left;
min-height: 200px;
}
.middle{
width: 100%;
background-color: #99CCCC;
}
.left,
.right{
width: 200px;
}
.left{
margin-left: -100%;
background-color: #FF9999;
/* position: relative; */
/* left: -200px; */

}
.right{
margin-left:-200px;
background-color: #996699;
/* position: relative;
right: -200px; */
}
/* 新添加的子div */
.middle-content{
margin:0 200px;
}
</style>
</head>

<body>
<header>我是顶部</header>
<section class="container">
<div class="middle">
<div class="middle-content">  <!-- 这里添加子div -->
我是自适应的内容区
我是自适应的内容区
我是自适应的内容区
我是自适应的内容区
我是自适应的内容区
</div>
</div>
<div class="left">我是左边固定框</div>
<div class="right">我是右边固定框</div>
</section>
<footer>我是尾部</footer>
</body>
</html>

圣杯布局有个小问题，当主面板比两边的子面板宽度小的时候，布局就会乱掉。

对于这个问题我们可以采用为主面板设置最小宽度来解决。

参考资料：

CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 面试题前端圣杯布局双飞翼布局 CSS布局

相关文章推荐

新的分享

章节导航