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>

效果如下：