將3個div彼此相鄰放置在未定義大小的div上

Question

我有一個標題，它佔用了整個屏幕的寬度。在我的頭文件中，我想放置3個div，它們應該彼此相鄰。側面的div爲固定寬度，中間應該佔用其他空間。所以我不知道標題的寬度，我不知道中間容器的寬度。

現在我有這樣的代碼： HTML：

<div id="header"> 
    <div id="menu-container"> 
    menu goes here 
    </div> 
    <div id="logo-container"> 
    logo goes here 
    </div> 
    <div id="music-player-container"> 
    music player comes here 
    </div> 
</div> 

和css：

#header { 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

#menu-container { 
    width: 400px; 
    height: inherit; 
    float: left; 
} 

#logo-container { 
    height: 100%; 
    background-image: url('../images/logo.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    float: left; 
    width: auto; 
} 

#music-player-container { 
    width: 400px; 
    height: inherit; 
    float: left; 
} 

應根據其他問題與浮子合作....它不

Answer 1

您可以使用帶有負邊距的浮動div：

http://jsfiddle.net/cy5E7/1/

你的情況：

http://jsfiddle.net/AjVHy/

負利潤更好然後就左/右浮動固定的div。如果用戶有非常小的窗口，我們不會搞亂佈局。看看這個不好的例子（調整瀏覽器窗口的寬度）：http://jsfiddle.net/surendraVsingh/qZLHb/1/（感謝@SVS）。在正常的浮動佈局中，只有在父容器足夠寬的情況下，所有浮動的div纔會在位。

的標準浮動佈局的另一個缺點是，當我們想欄佈局，但我們不知道的中間內容高度，看起來像它可以看看

• float layout, dynamic content height
• negative margins layout, dynamic content height

Answer 2

我我不完全確定你打算編碼的內容，但從我的角度來看，我認爲它是這樣的：「你想要有3列，列1是固定的，列2是流體寬度，列3還是又是固定的寬度。「

我在這裏無法理解的是，在寬度非常小的顯示器（例如1024x768分辨率）的情況下，如果雙方都有一個400像素的列，那麼只有224px的標識空間。這看起來不自然。如果你仍然想繼續，我建議你把所有三個div [menu-container, logo-container & music-player-container]放在另一個名爲header的元素（如果你使用的是HTML5）或其他任何你喜歡的名稱的div中（如果你喜歡，重新使用< = HTML 4.01），然後將其寬度修復爲100％;和200px的固定高度;

然後讓菜單容器float: left;和音樂播放器容器float: right;。這會給徽標容器留出空間。讓徽標容器有一個width: auto;。如果我是對的，完成此操作將爲您提供基本的半流體頁眉佈局。

乾杯，希望你的問題被解決快:)

Answer 3

開啓你的第二和第三的div的順序，然後使用這個CSS。

#menu-container, #music-player-container { 
    float:left; 
    width: 400px; 
} 
#music-player-container { 
    float:right; 
} 
#logo-container { 
    margin:0 400px; 
} 

jsfiddle example

Answer 4

我明白你想要做什麼，我很抱歉地說，我還沒有找到針對此問題的解決方案，無需使用JavaScript/jQuery的一些醜陋的形式。

本質上，問題在於CSS沒有任何屬性（即使在擺弄顯示屬性時也不會有），這將允許您有兩個元素，一個具有固定寬度，另一個佔據剩餘空間DIV。有一些浮動選項可以讓你非常仔細地模擬這一點，但我可以告訴你，他們不太可能給你真正想要的東西。

這裏有一個資源，一個名爲Bootstrap的項目，你可以像其他任何jQuery插件一樣安裝（或者你可以像使用「CSS」插件一樣使用它 - 你會明白我的意思 - 如果你不喜歡不需要JavaScript），這將使你能夠做你想做的事。

這裏是鏈接：http://twitter.github.com/bootstrap/download.html

我強烈建議您先查看文檔，以確保您知道什麼注意事項/限制。

祝你好運！

編輯：我喜歡rogal的答案，但在使用它之前，你應該記住，這樣做會消除你添加左邊框的能力，並且很難將背景圖像應用於具有負邊距的div。

Answer 5

另一種選擇：

#header { 
    display: table; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    border: none; 
} 
#header > div { 
    display: table-cell; 
    height: inherit; 
} 
#menu-container, #music-player-container { 
    width: 400px; 
} 
#logo-container { 
    background-image: url('../images/logo.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

HTH

Answer 6

當然你可以使用一個表.. - 隱藏 -

事情是這樣的標題DIV中：

<table width=100%> 
    <tr> 
     <td width=200> 
      menu 
     </td> 
     <td> 
      logo 
     </td> 
     <td width=400> 
      music 
     </td> 
    </tr> 
</table> 

（太懶了） CSS atm）

Answer 7

想不到一個很好的方法來做到這一點。不是一個理想的解決方案，但你可以把它變成一張桌子。

<table> 
    <tr> 
     <td> 
      <div></div> 
     </td> 
     <td> 
      <div></div> 
     </td> 
     <td> 
      <div></div> 
     </td> 
    </tr> 
</table> 

然後你可以設置包含它的div和td的尺寸是相同的。