製作一個小孩div用設置寬度兄弟填充剩餘空間

Question

以下是代碼。

<div style="overflow:hidden; width:800px;"> 
    <div style="float:left; width:500px;"> 
    first text 
    </div> 
    <div style="float:left; width:300px;"> 
    second text 
    </div> 
</div> 

正如你看到的我用width:300px;從而使第二個div需要的空間權的其餘部分。使整個空間佔據整個空間的另一個選擇是什麼？設置width:100%;沒有幫助，因爲它跳下來。 我問的原因是每次我必須計算800-500 = 300（px）。一旦500px更改爲550px，我必須將300px更改爲250px。我相信有更好的方法來設置寬度。 謝謝。

Answer 1

我想這將標記更好地發揮http://jsbin.com/apubay/1/edit

Answer 2

這個問題的一般解決方法是

1. 浮動的第一個元素，並給它一個固定的寬度。
2. 將第二個元素顯示爲一個塊，並給它一個等於第一個元素寬度的左邊距。

這裏是你的代碼，修改爲將這一模式：

<div style="overflow: hidden;"> 
    <div style="float: left; width: 500px;"> 
    first text 
    </div> 
    <div style="display: block; margin-left: 500px;"> 
    second text 
    </div> 
</div> 

我刪除從容器800像素寬度。您可以將其添加回去，但這種方式會破壞此解決方案的用途。如果您要設置800px的固定寬度，那麼右側的內容總是300px。這是在JS斌運行：

JS Bin example

雖然這確實實現做出正確的元素佔用的剩餘空間的效果（你會發現，它的工作原理通過調整瀏覽器的寬度），你仍然會需要在兩個地方改變寬度以使它們保持同步：（1）浮點的寬度，以及（2）塊的左邊距。然而，這比在你的解決方案中稍微簡單一些，因爲不涉及減法;你在這兩個地方使用相同的值。 （這也意味着它可以用於任何單位：em，px，%）

作爲一個方面說明，我總是建議不要使用overflow: hidden含彩車因爲幾個月在路上你可能會裁剪效果，而不是記住它是因爲你在這裏使用了overflow: hidden。在Which method of 'clearfix' is best?

查看替代解決方案