DIV+CSS 双列 左自适应 右固定 布局

<!DOCTYPE html>  
<html>  
    <head>
        <title>Easy</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style>
            body{
                background:#C9DFA7;
                color:#99FF00;
            }
            #falseLeft{
                width:100%;
                margin-left:-200px;
                background:#3E551C;
                float:left;
            }
            #trueLeft{
                margin-left:200px;
                background:#99BF60;
            }
            #right{
                width:200px;
                float:left;
                background:#7DAA39;
            }
        </style>
    </head>
    <body>
        <div id="falseLeft">
            <div id="trueLeft">Left</div>
        </div>
        <div id="right">Right</div>
    </body>
</html>  

其中这段代码起关键作用:

#falseLeft{
    width:100%;
    margin-left:-200px;
    background:#3E551C;
    float:left;
}
#trueLeft{
    margin-left:200px;
    background:#99BF60;
}

原理非常简单,我们先建一个id为falseLeft的div,将它的margin-left设置成-200px,这样这个div的左侧部分就在显示范围外了.

再为div#falseLeft设置width:100%完成宽度自适应,但是由于margin-left样式已经被设置成负值,所以在div的右侧部分会空出一段宽为200px的空间.

在div#falseLeft里还有一个id为trueLeft的div,这个才是真正的显示给用户的左侧列,将它的margin-left设置成200px,使trueLeft回归到falseLeft未设置margin-left样式之前正常的位置.

最后给div#falseLeft和div#right设置float:left,实现浮动布局.

这样就有了左侧自适应右侧固定宽度的双列布局效果.