圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style>
*{
margin:0;
padding:0;
text-align:center;/*设置文字居中*/
}
.container{
height:300px;
padding:0 200px;/*使容器整体向中间挤压*/
}
.middle{
width:100%;
height:300px;
background:gray;
float:left;
}
.left{
width:200px;
height:300px;
background:red;
float:left;
margin-left:-100%;/*使左边栏浮动到最左边*/
position:relative;/*设置相对定位，使左边栏浮动到正确位置*/
left:-200px;
}
.right{
width:200px;
height:300px;
background:green;
float:left;
margin-left:-200px;/*使右边栏浮动到最右边*/
position:relative;/*设置相对定位，使右边栏浮动到正确位置*/
right:-200px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">中间自适应栏</div><!-- 注意此处中间自适应栏要放在文档流前优先渲染 -->
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style>
*{
margin:0;
padding:0;
text-align:center;
}
.middle{
width:100%;
float:left;
}
.middle-inner{
height:300px;
background:gray;
margin-left:200px;
margin-right:200px;
}
.left{
width:200px;
height:300px;
background:red;
float:left;
margin-left:-100%;
}
.right{
width:200px;
height:300px;
background:green;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-inner">中间自适应栏</div>
</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</body>
</html>
网友评论