兩列布局-左側定寬|右側自適應

CSS兩列布局：左側固定寬度，右側寬度自適應

在實際的應用中，只有單列寬度變化，而其它保持固定的佈局可能會更加實用。一般在存在多個列的頁面中，通常比較寬的一個列是用來放置內容的，而窄列放置鏈接、導航等內容，這些內容一般寬度是固定的，不需要擴大。因此如果能把內容列設置爲可以變化，而其他列固定，會是一個很好的方式。

效果圖：

方法：

左側粉色div寬度固定爲300px，左浮動；

右側棕色div外面再套一層div，把外層div設置成寬度爲100%的浮動塊，並設margin-right設爲-300px，這樣一來，外層div就向右移了300px，正好給左側div騰出空來；

最後把內層div的margin-right設爲300px，就正好充滿了右側的可見區域，即圖中的棕色區塊。

HTML代碼：

<div>
    <div class="side"></div>
    <div class="content-out">
        <div class="content"></div>
    </div>
</div>

CSS代碼：

.side {
    width: 300px;
    height: 300px;
    background-color: #ffb5b5;
    float: left;
}
.content {
    height: 300px;
    background-color: #d6d6ad;
    margin-right: 300px;
}
.content-out {
    float: left;
    width: 100%;
    margin-right: -300px;
}