div自適應寬度

對於div自適應寬度，網上的說法基本上都是將要自適應寬度的div放在其它固定寬度的最後，不指定其float屬性或將float屬性指定爲none，好比三欄佈局居中的一欄爲自適應寬度，就能夠這樣來定義三欄div：

<div id="left" style="float:left;width:100px;">這是左欄</div>
<div id="right" style="float:right;width:100px;">這是右欄</div>
<div id="center" style="float:none;width:auto;">這是中欄，且自適應寬度</div>

效果以下：

可是若是咱們增長中欄的文字內容，而且爲其添加邊框和背景色，就會發現問題了：

<div id="left" style="float:left;width:100px;">這是左欄</div>
<div id="right" style="float:right;width:100px;">這是右欄</div>
<div id="center" style="float:none;width:auto;background-color:#dddddd;border:1px solid #999999;">這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。</div>

其結果以下：

能夠看到，中欄僅有高度小於左右兩欄的那部份內容纔會自適應寬度，超出左右兩欄的高度，就不受控制了，且其真實的寬度仍然是100%，這能夠從背景和邊框看出來。

不過既然它能容許浮動的兩欄在其左右，並與左右兩欄相安無事，就有了另外一個解決方案，即指定中欄的左右外邊距，覺得兩個側欄留出位置，而自身內容沒必要擔憂會因爲超出左右欄高度而失控。

代碼以下：

<div id="left" style="float:left;width:100px;">這是左欄</div>
<div id="right" style="float:right;width:100px;">這是右欄</div>
<div id="center" style="float:none;width:auto;margin:0 100px;background-color:#dddddd;border:1px solid #999999;">
        這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。
</div>

截圖以下：

也能夠使用padding（內邊距）來實現相同效果，可是須要在中欄中再增長一個子div，爲其指定邊框和背景，代碼以下：

<div id="left" style="float:left;width:100px;">這是左欄</div>
<div id="right" style="float:right;width:100px;">這是右欄</div>
<div id="center" style="float:none;width:auto;padding:0 100px;">
    <div id="inner" style="background-color:#dddddd;border:1px solid #999999;">
        這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。這是中欄，且自適應寬度。
    </div>
</div>

效果以下：