最大寬度在CSS標題

Question

所以基本上，我的CSS和HTML是這樣的。我有一個頂部和底部的標題，以及如果用戶登錄的USERBOX我的HTML和CSS的形成是這樣的：

<div id=header> 
<div id=leftheader> 
    <div id=topheader> 
    [top header] 
    </div> 
<div id=bottomheader> 
    [bottom header] 
</div> 
</div> 
<div id=rightheader> 
    [userbox] 
</div> 

從某種意義上說，我要USERBOX在用戶登錄時出現在頂部和底部導航菜單的右側。但是，如果他們沒有登錄，我想使標題擴大整個屏幕的寬度。我有PHP後端。

以前通過做width：100px;在頂部和底部的divs。但是，當我登錄時，userbox出現在兩個導航菜單下。我想解決這個問題的一種方法是使寬度不總是100％。有沒有辦法做到這一點仍然有我的用戶箱在右邊？

我試過使用最大寬度，我認爲它沒有定義。

僅供參考我將頂部和底部標題左側浮動，右側標題右側浮動。謝謝

Answer 1

這可能與<table>佈局很容易。但是，由於您的問題涉及<div>元素和我想你想要一個CSS的解決方案，下面應該工作：

<style type="text/css"> 
#header { display: table; width: 100%; } 
#leftheader, #rightheader { display: table-cell; } 
</style> 

<div id="header"> 
    <div id="leftheader"> 
     <div id="topheader">[top header]</div> 
     <div id="bottomheader">[bottom header]</div> 
    </div> 
    <div id="rightheader"> 
     [userbox] 
    </div> 
</div> 

的jsfiddle：http://jsfiddle.net/fausak/ju3su/

這裏有一個鏈接到quirksmode.org談論display: table：http://www.quirksmode.org/css/display.html#table

display: table告訴元素顯示爲表格。嵌套元素應該顯示爲table-row和table-cell，模仿良好的舊TR和TD。