您的位置：首页 > 其它

圣杯布局/双飞翼布局

2017-07-14 00:00 405 查看

事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。

<!DOCTYPE html>
<html>

<head>
<title>shengbeibuju</title>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}

header {
width: 100%;
height: 40px;
background-color: darkseagreen;
}

.container {
background-color: gray;
overflow: hidden;
padding:0 200px;
}
/******重点start******/
.middle {
width: 100%;
background-color: green;
height: 200px;
float: left;
}

.left {
float: left;
width: 200px;
height: 200px;
background-color: yellow;
margin-left: -100%;/*重点*/
position: relative;/*重点*/
left:-200px;/*重点*/
}

.right {
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin-left: -200px;/*重点*/
position: relative;/*重点*/
right: -200px;/*重点*/
}
/*********重点end**********/
.footer {
width: 100%px;
height:100px;
background-color: darkslategray;
}
</style>
</head>

<body>
<header>
<h2>header内容区域</h2>
</header>
<div class="container">
<div class="middle">
<h2>中间弹性区</h2>
太热了，非洲留学生说要回家避暑】一段非洲留学生要回家避暑视频走红。他叫King Fazz，来自非洲加纳，在@西南科技大学 读研。当天他和同学练完足球，热得受不了就录下视频：“太热了，我要回非洲避暑。”他的家乡加纳只有20多度。
</div>
<div class="left">
<h2>左侧固定</h2>
</div>
<div class="right">
<h2>右侧固定</h2>
</div>
</div>
<div class="footer"></div>
</body>

</html>

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

标签： 布局圣杯布局双飞翼布局

相关文章推荐

新的分享

章节导航