2007-11-16 20:3:2
用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;margin:0 101px 0 201px;">中间%</div>
其中，中间相关div的margin的左右值最好大于等于左右固定宽度，就如我这里设宽了1px。
如果倒过来，想要中间固定，两边自适应咋办？
<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宽度的一半值。
这样就可以分别实现两种需要自适应的三栏模式了。其它左或右模板需要的，或要四栏的自己扩展哈！这里到此结束。
原文地址：http://blog.yyld.net/article/1042.html
Tags: divcss Zblog |
原创文章如转载，请注明：转载自：巴士飞扬-技术BLOG : http://www.busfly.net/
本文链接地址：http://www.busfly.net/post/240.html
如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~
