一侧固定宽度一侧自适应宽度的方法分析.docx

、另一侧自适应宽度的方法分析
实现效果
左侧固定宽度,右侧随浏览器自适应宽度的方法,
测试浏览器
测试过程浏览器IE9与IE6
制作结果测试Chrome opera FF,IE6 IE8 IE9
基本思路和方法
一侧浮动,另一侧自动宽度并进行外补丁
主框架
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div class=”clr”></div>
</div>
对于外壳
#container{ width:98%; margin:0 auto; border:1px solid #900; height:45px; }
这里外壳宽度是可以随意设的,可以是百分比,也可以是固定数值px
另外,这里的清除 clr是无效的,在IE8下,#container的高度依然是不扩充的,原因未知,#container在这里的左右主要是可以控制#left 和#right的总宽度可以不用满屏,在左右两次可以留白,当然后面的方法中,通过#left和#right的自身控制也是可以实现的
关键的css设置
#left{ width:240px; _margin-right:-3px; float:left; display:inline;}
#right{margin-left:240px; _margin-left:237px;}
红色部分都是为了纠正IE6的bug,如果没有,那么就会出现缝隙,原因未知
这里#left的合模型设置是非常宽松的,可以任意设置padding 和margin,比如
#left{ width:240px; _margin-right:-3px; float:left; display:inline;
Margin:10px; padding:10px; border:3px solid #060;}
只不过在#right的样式中,需要设计成
#right{margin-left:286px; /*10+10++3+240+3+10+10*/
_margin-left:283px;}
同样#left的高度也是十分宽松的,可以任意设置,不会影响效果
这里对于#right的width的设置是本文的重点,如果width=100%;效果也是可以实现的,但是如果#right设置了padding或者margin或者border,那么总宽度就超过了屏幕宽度,在IE6下就会出现错位
所以这里#right设置成 auto或者不设,(基于保险起见,还是设置auto吧)
这样,#right无论设置如何的padding或者margin或者border,页面都不会错位,这就后面的嵌套做复杂的布局而又能让空隙中留白就非常方便
甚至里面嵌套的div,也同样如此,设置了100%;就不可以自身在设置padding和margin,设置了auto同样能撑满窗口,也可以设置padding或者margin或者border
特殊的table是可以设置100%;设置table td标签还可以设置padding,这是和div不同的,
所以对于#right以及里面的div,设置width:auto布局就容易多了,而结合