圣杯布局、双飞翼布局
这两种布局都是两侧固定，中间自适应。中间栏要在放在文档流前面以优先渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,html{
margin:0;
padding:0;
}
*{box-sizing:border-box;}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
.center{
text-align: center;
}
.container{
display: flex;
}
.col{
flex:1;
}
.sb-content{
padding:0 100px 0 200px;
}
.sb-content .middle{
float:left;
width:100%;
height:100px;
background:red;
}
.sb-content .left{
width:200px;
height:100px;
float:left;
margin-left:-100%;
background:blue;
left:-200px;
position:relative;
}
.sb-content .right{
width:100px;
height:100px;
float:left;
margin-left:-100px;
background: green;
position:relative;
right:-100px;
}
.sfy-content .inside{
margin:0 100px 0 200px;
height:100%;
width:100%;
}
.sfy-content .middle{
float:left;
width:100%;
height:100px;
background:red;
}
.sfy-content .left{
width:200px;
height:100px;
float:left;
margin-left:-100%;
background:blue;
position:relative;
}
.sfy-content .right{
width:100px;
height:100px;
float:left;
margin-left:-100px;
background: green;
position:relative;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<h3 class="center">圣杯布局(中间栏不被遮挡)</h3>
<div class="sb-content clearfix">
<div class="middle">我是中间内容</div>
<div class="left">我是left块</div>
<div class="right">我是right块</div>
</div>
</div>
<div class="col">
<h3 class="center">双飞翼布局(中间栏被遮挡)</h3>
<div class="sfy-content">
<div class="middle">
<div class="inside">
我是中间块
</div>
</div>
<div class="left">我是left块</div>
<div class="right">我是right块</div>
</div>
</div>
</div>
</body>
</html>
网友评论