圣杯布局和双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应
圣杯布局
这里实现了左(200px)右(220px)宽度固定,中间自适应,container部分高度保持一致。
说明:
- html代码中,middle部分首先要放在container的最前面,然后是left,right
- 将三者都
float:left
,再加上一个position:relative;
- middle部分
width:100%;
占满 - 此时middle占满了,所以要把left拉到最左边,使用
margin-left:-100%;
- 此时left拉回来了,但会覆盖middle内容的左端,要把middle内容拉出来,所以要在外围container上加
padding:0 220px 0 200px;
- middle内容拉回来了,但left也跟过来了,所以要还原,就对left使用相对定位
left:-200px;
同理,right也要相对定位还原right:-220px;
- 到这里就大致自适应好了。如果想container高度保持一致可以给left、middle、right都加上
min-height:130px;
|
|
双飞翼布局
说明:
html代码中,main要放最前边,sub extra
将main sub extra 都
float:left;
将main占满
width:100%;
此时main占满了,所以要把sub拉到最左边,使用
margin-left:-100% ;
同理 extra使用margin-left:-220px;
- main内容被覆盖了吧,除了使用外围的padding,还可以考虑使用margin,给main增加一个内层div– main-inner, 然后
margin:0 220px 0 200px;
|
|