最大宽度在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。