三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

二列左列宽度固定,右列宽度自适应布局的四种方法
作者:Neoxone    发表时间: 2008年09月21号,星期天     阅读:15,513 次

第一种方法,网上流传比较广的方法。采用左列left浮动,右列不浮动,采用margin-left定位的方式。此方法会有一个 ie6 3px bug .另外,当浏览器框缩小到一定程度时,右侧会掉下来。

第二种方法:采用左列向左浮动,右列绝对定位。为解决ie6下右列不撑开问题,在右列中设置一元素右浮动(不是个好方法)。

此中wrap的right:0;本是为撑开右列而设置。无奈ie6下无效。故设置了floatSpan。有此之后,去除float:right也无影响于效果。

方法三:左列使用绝对定位,右列使用margin-left定位。

纵观前面的几种方法,不是使用了margin-left定位,就是借助position的left定位,这两种定位方法,都需要事先知道left列的宽度,扩展性上不是很好。
那么,抛弃这两种定位方法,可不可以呢?也许你要说,CSS中定位的方法也就只有这两种,抛弃这两种定位方法,就没有其他定位方法了。难道不用定位也成?
没错。
我们可以借助ie下的haslayout让right列触发haslayout。而FF下则使用overflow:hidden(这个的原理不是很理解)。

标签: , ,

4 条评论 发表在“二列左列宽度固定,右列宽度自适应布局的四种方法”上

  1. 麦芽糖和鱼 说:

    ):7:(

    回复

  2. simplee 说:

    最后一个方法是可以实现效果,但是在overflow:hidden的影响下,左边DIV内容长度如果大于自适应的div自身的长度!内容会被隐藏!

    回复

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(