兩列布局，左邊固定，右邊自適應的三種方法

    <!-- 方法一：使用CSS3屬性calc()進行計算。注意：calc()里的運算符兩邊必須有空格 -->
    <div>
        <div style="float:left;width:200px;height:500px;background-color:blue;">
            
        </div>
        <div style="float:left;width:calc(100% - 200px);height:500px;background-color:red;">

        </div>
    </div>

    <div style="clear:both;">
        <br>
    </div>

    <!-- 方法二：使用margin負值，使右邊容器與左邊同一行，並100%寬。再在右邊容器中放一個子容器，設置margin-left值為左邊容器的寬度。 -->
　　<!-- 使用負margin，瀏覽器會認為這個元素的大小變小了，所以會改變布局，布局會按照元素的大小減去負margin的大小進行布局；然而實際上卻沒有變小，所以布局變化后顯示的大小還是原大小。詳情：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 -->

    <div>
        <div style="float:left;width:200px;height:500px;background-color:blue;">
            
        </div>
        <div style="float:left;width:100%;height:500px;-background-color:red;margin-left:-200px;">
            <div style="margin-left:200px;background:yellow;height:500px;">
                
            </div>
        </div>
    </div>

    <div style="clear:both;">
        <br>
    </div>
    
    <!-- 方法二：使用position，右邊容器必須設置right -->
    <div style="position:relative;">
        <div style="position:absolute;left:0;width:200px;height:500px;background-color:blue;">
            
        </div>
        <div style="position:absolute;left:200px;right:0px;height:500px;background-color:red;">
            
        </div>
    </div>