圣杯布局
需求分析
两边固定,当中自适应
当中列要完整显示
当中列要优先加载
技术点总结
1.浮动:搭建完整的布局框架
元素与元素之间的边界是由margin控制的,由于块级元素独占一行
所以必须先让 left 和 right 向左浮动,然后清除content 的浮动
2.margin 为负值:调整旁边两列的位置(使三列布局到一行上)
middle 的有边界和 left 的左边界其实是合在一块的,只不过一行放不下,换行了 所以应该让left的左边界的 margin-left 推一个 middle 的宽度
margin-left 为负值,即往里面去缩,虽然改变了元素的边界,但不改变元素的位置
3.使用相对定位:调整旁边两列的位置(使两列位置调整到两头)
left 和 middle 的参照物一样,都是 content
故应该给容器 content 加padding(上下为0,左右为200px)
最后给 left 来一个相对定位
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header,#footer{
height: 20px;
text-align: center;
border: 1px solid deeppink;
background: gray;
}
#content{
overflow: hidden;
padding: 0 200px;
}
/* 伪等高布局 */
#content .middle , #content .left , #content .right{
padding-bottom: 10000px;
margin-bottom: -10000px;
}
#content .middle{
float: left;
width: 100%;
background: pink;
}
#content .left{
position: relative;
left: -200px;
/* margin-left只动元素边界,不动元素位置 */
margin-left: -100%;
float: left;
background: yellow;
width: 200px;
}
#content .right{
position: relative;
right: -200px;
margin-left: -200px;
float: left;
background: yellow;
width: 200px;
}
/* 清除浮动 */
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content" class="clearfix">
<div class="middle">
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>