三列布局
圣杯布局
圣杯布局的要求:
- 三列布局
- 两侧固定,中间自适应
- 中间列要完整显示
- 中间列要优先加载
浮动:搭建完整的布局框架
外边距:margin
设为负值,调整两侧的列的位置(使三列布局到一行内)
相对定位:调整两侧的列的位置(使两侧位置达到窗口边界)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
min-width: 900px;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
.header,
.footer {
height: 50px;
background: gray;
text-align: center;
}
.content {
padding: 0 300px;
}
.content div {
height: 600px;
}
.left {
width: 300px;
background: orange;
float: left;
margin-left: -100%;
position: relative;
left: -300px;
}
.middle {
width: 100%;
background: #bfa;
float: left;
}
.right {
width: 300px;
background: orange;
float: left;
margin-left: -300px;
position: relative;
left: 300px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content clearfix">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
戳我查看最终效果!!!
伪等高布局
伪等高布局要求:
- 所有列的高度由内容撑开
- 所有列的高度相等
- 所有列的高度由内容最多的列决定
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪等高布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.header,.footer{
width: 940px;
height: 50px;
margin: 0 auto;
background: gray;
text-align: center;
}
.clearfix::after,
.clearfix::before {
content: "";
display: table;
clear: both;
}
.warp {
width: 940px;
margin: 0 auto;
border: 2px dashed red;
overflow: hidden;
}
.warp .left {
width: 300px;
float: left;
background: orange;
}
.warp .right {
width: 640px;
float: left;
background: #bfa;
}
.warp .left,.warp .right{
padding-bottom: 99999px;
margin-bottom: -99999px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="warp clearfix">
<div class="left">
left <br> left <br> left <br>
left <br> left <br> left <br>
</div>
<div class="right">
right <br> right <br> right <br>
right <br> right <br> right <br>
right <br> right <br> right <br>
right <br> right <br> right <br>
right <br> right <br> right <br>
right <br> right <br> right <br>
right <br> right <br> right <br>
right <br> right <br> right <br>
right <br> right <br> right <br>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼布局
双飞翼布局的要求:
- 三列布局
- 两侧固定,中间自适应
- 中间列要完整显示
- 中间列要优先加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
min-width: 600px;
}
.header,
.footer {
height: 50px;
line-height: 50px;
text-align: center;
background: gray;
}
.content {
overflow: hidden;
}
.content .middle {
float: left;
width: 100%;
padding-bottom: 99999px;
margin-bottom: -99999px;
background: #bfa;
}
.content .left,
.content .right {
float: left;
width: 200px;
padding-bottom: 99999px;
margin-bottom: -99999px;
background: orange;
}
.content .left {
margin-left: -100%;
}
.content .right {
margin-left: -200px;
}
.content .middle .m-inner {
margin: 0 200px;
}
</style>
<body>
<div class="header">header</div>
<div class="content">
<div class="middle">
<div class="m-inner">
middle <br /> middle <br /> middle <br /> middle <br /> middle <br />
middle <br /> middle <br /> middle <br /> middle <br /> middle <br />
middle <br /> middle <br /> middle <br /> middle <br /> middle <br />
middle <br /> middle <br /> middle <br /> middle <br /> middle <br />
middle <br /> middle <br /> middle <br /> middle <br /> middle <br />
middle <br /> middle <br /> middle <br /> middle <br /> middle <br />
</div>
</div>
<div class="left">
left <br /> left <br /> left <br /> left <br />
</div>
<div class="right">
right <br /> right <br /> right <br /> right <br /> right <br />
right <br /> right <br /> right <br /> right <br /> right <br />
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
总结
- 两种布局方式都是把主列放在文档流最前面,使主列优先加载。
- 两种布局方式在实现上,都是让三列浮动,然后通过负外边距形成三列布局。
- 两种布局方式的不同之处在于如何处理中间主列的位置:
- 圣杯布局是利用父容器的左、右内边距+两个从列的相对定位。
- 双飞翼布局是把主列嵌套在一个新的父级块中,利用主列的左、右外边距进行布局调整。
如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/CSS2.1/02.html