圣杯布局
<!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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
