align divs horrizontaly - 第一個採取所有水平可用空間

Question

我有2個div我需要水平排列，我知道第二個的寬度，我需要第一個採取所有剩餘的自由空間。任何人都可以幫助我，並告訴我的CSS爲了實現這一目標？

Answer 1

你可以做這樣的事情：

<div style="width:500px;"> 
    <div style="width:100px;float:right;background-color:cyan;">bar</div> 
    <div style="margin-right:100px;background-color:magenta">foo</div> 
</div> 

條漂浮在右邊100像素，在Foo的保證金的頂部。 foo需要其他400px。

Answer 2

嘗試將第二容器的寬度設置爲您已知值，第一個對width:100%;

Answer 3

嘗試做這樣的事情：

<div style="width:200px; float:left;"></div> 
<div style="width:auto;"></div> 

Answer 4

您可以使用百分比，這是很方便的時候你不關心確切的寬度。如果你需要一個確切的寬度，使用javascript來獲得你知道的div的offsetwidth，並浮動兩個div。然後，相應地設置其他div的寬度。我要提醒的是，將其他div的值設置爲像素 - 如果用戶調整窗口大小，則必須考慮更多工作。如果你不需要它是完全準確的，將另一個div設置爲百分比，這將自動處理窗口大小調整。 其他問題也隨之出現，但基本上這是實現它的一種方式。

Answer 5

你要求的是有點棘手。但是，這應該工作...

http://jsfiddle.net/2hseV/2/

這樣做有什麼用DIV定位。這應該是跨瀏覽器兼容的。我這樣做的原因是，沒有簡單的方法來說「有兩個兄弟的div，其中一個消耗所有可用空間」，而沒有將第二個div推向右側。

例如，如果您嘗試使用百分比你要麼推DIV向右或拿出短：

<div style="width: 200px; height: 100px;"> 
    <div style="width: 100%; height: 100%; float: left;"></div> 
    <div style="width: 90px; height: 100%; float: left;"></div> 
    <div style="clear: both;"></div> 
</div> 

所以不是，我建議你重疊第二個div到第一個使用絕對positiong，像這樣：

<div style="width: 200px; height: 100px; position: relative;"> 
    <div style="width: 100%; height: 100%; float: left; position: relative;"><!-- Content of first div here --></div> 
    <div style="width: 90px; height: 100%; float: left; position: absolute; right: 0; top: 0;"><!-- Content of second div here --></div> 
</div> 

你要記住這裏的一件事是，你的第一個div的內容將在第二個div下去，如果它變得太寬 - 所以你可能需要限制寬度！