导航

复制本文网址 | 上一篇 | 下一篇 | 返回日志列表

用CSS设定有自适应宽度模块的两种三栏

今天有朋友问我,怎么做一个这样的blog皮肤:三栏;左右都固定宽度,中间宽度随分辨率变化(自适应)。我之前帮人调整blog皮肤的时候,也遇到这个问题,但没找解决办法。这次也就借机会找找看了,重点就在position:absolute;(绝对定位)上:
<div style="width:200px;margin:0 auto;height:400px;background:#bbb;position:absolute;left:0px;">左边固定</div>
<div style="width:100px;margin:0 auto;height:400px;background:#ccc;position:absolute;right:0px;">右边固定</div>
<div style="width:100%;margin:0 auto; height:400px;background:#aaa;">中间%</div>
中间内的层要加padding:0 101px 0 201px;

如果倒过来,想要中间固定,两边自适应咋办?
<div style="width:50%;margin:0 auto;height:400px;background:#bbb;position:absolute;left:0;padding-right:105px;">左边%</div>
<div style="width:50%;margin:0 auto;height:400px;background:#ddd;position:absolute;right:0;padding-left:105px;">右边%</div>
<div style="position:realtive;"><div style="width:200px;margin:0 auto; height:400px;background:#aaa;position:absolute;left:50%;margin-left:-100px;">中间固定</div></div>

这里3个div都设置了position:absolute;,并且中间固定层因为居中问题,必须嵌套在position:realtive;相对定位层里。而中间固定宽度的margin-left:-100px;的100为width宽度的一半值。

这样就可以分别实现两种需要自适应的三栏模式了。其它左或右模板需要的,或要四栏的自己扩展哈!这里到此结束。

  • 2007-11-5 13:34:19  CSS   
评论列表
共2篇评论
  • 1楼   老寒  http://www.morean.cn   2008-9-5 14:59:56   
  • 这个代码我试过了,在1280*960下惨不忍睹…
  • 2楼   老寒  http://www.morean.cn   2008-9-5 17:02:28   
  • 我错了…丹丹是正确的

发表评论

☆温馨提示:为防spam,评论禁止了网址相关内容,如想发自己的网站,请往网址专用输入框里放 ^_^

Powered By Z-Blog | YYNote Design By 星铃丹 | 摇曳铃丹 版权所有 YYLD.net