一、圣杯布局(两边固定，中间自适应）
html:
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css:
*{
margin:0;
padding:0;
}
.container{
padding:0 100px 0 200px;
overflow：hidden;
}
.left,.middle,.right{
position:relative;
float:left;
min-height:200px;
}
.left{
margin-left:-100%;
left:-200px;
width:200px;
background:#ccc
}
.middle{
width:100%;
background:red;
}
.right{
margin-left:-100px;
right:-100px;
width:100px;
background:green
}
二、双飞翼布局
html
<div class="container">
<div class="middle">
<div class="middleinner">middle</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
css
*{
margin:0;
padding:0;
}
.middle,.left,.right{
float:left;
min-height:200px;
}
.left{
width:100px;
margin-left:-100%;
background:red;
}
.right{
width:200px;
margin-left:-200px;
background:blue;
}
.middle{
width:100%
}
.middleinner{
margin:0 200px 0 100px;
min-height:200px;
background:green;
}
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论