您的位置：首页 > 其它

圣杯布局 or 双飞翼布局实现

2019-04-05 18:17 141 查看

圣杯布局
中间栏宽度自适应
左边栏
右边栏
优先加载中间栏，中间栏自动适应浏览器的大小，同时做右边栏有固定的宽度。

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>圣杯布局</title>
<style type="text/css">
*{margin:0;padding: 0}
body{
min-width: 400px;/*给容器加最小宽度，防止伸缩浏览器时出现样式混乱*/
}
div{
padding: 0 100px;/*左右两边预留100px给left，right；*/
overflow: hidden;/*隐藏溢出*/
}
.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.center,.left,.right{
position:relative;
float:left; /*让三个元素显示在一行*/

}
/**/
.center{
width: 100%;
background: skyblue;

}
.left{
margin-left:-100%;/*显示在center最左边*/
width: 100px;
left:-100px;/*移动到预留的左边位置*/
background:red;
}
.right{
margin-right: -100%;/*显示在最右边*/
width:100px;
background: red;
}
.footer{
clear:both;/*清除浮动*/
}
</style>
<body>
<header class="header">header</header>
<div>
<section class="center">center</section>
<section class="left">left</section>
<section class="right">right</section>
</div>
<footer class="footer">footer</footer>

</body>
<script type="text/javascript">

</script>
</html>

双飞翼布局
在圣杯布局基础上优化代码，中间栏中再加一层，就可以把定位去掉，给添加的中间栏加上margin：0 100px；
与圣杯布局的不同的是它不在需要position定位。

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>双飞翼布局</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
min-width: 400px;/*给容易加最小宽度，防止伸缩浏览器时出现样式混乱*/
}

.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.center,.left,.right{
float:left; /*让三个元素显示在一行*/
}
/**/
.center{
width: 100%;
}
.left{
margin-left:-100%;/*显示在center最左边*/
width: 100px;
background:red;
}
.right{
margin-left: -100px;/*显示在最右边*/
width:100px;
background: red;
}

.center-1{
margin:0 100px;
background: skyblue;
word-break: break-all;
}
.footer{
clear:both;/*清除浮动*/
}
</style>
<body>
<header class="header">header</header>
<div class="center">
<div class="center-1">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<footer class="footer">footer</footer>
</body>
<script type="text/javascript">
</script>
</html>

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

标签：

相关文章推荐

新的分享

章节导航