Html css标题中的最大宽度

所以基本上，我的css和html是这样工作的。我有一个顶部和底部的标题，以及一个用户框，如果用户登录。我的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

前一步很容易通过宽度完成：100px；在顶部和底部凹陷处。但是，当我登录时，userbox显示在两个nav菜单的下方。我认为解决这个问题的一个方法是使宽度不总是100%。有没有办法让我的用户框保持在右边

我尝试使用最大宽度，我认为它没有定义

---

作为参考，我将顶部和底部标题向左浮动，右侧标题向右浮动。谢谢

这可以通过

布局轻松实现。但是，由于您的问题涉及

元素，并且我认为您需要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>

#标题{显示：表格；宽度：100%；}
#leftheader，#rightheader{显示：表格单元格；}
[上标题]
[底部标题]
[用户框]

jsFiddle:

这里有一个到quirksmode.org的链接，讨论的是

display:table

：

display:table

告诉元素显示为表。嵌套元素应显示为

表格行

和

表格单元格

，模仿良好的旧TR和TD

---

这可以通过

布局轻松实现。但是，由于您的问题涉及

元素，并且我认为您需要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>

#标题{显示：表格；宽度：100%；}
#leftheader，#rightheader{显示：表格单元格；}
[上标题]
[底部标题]
[用户框]

jsFiddle:

这里有一个到quirksmode.org的链接，讨论的是

display:table

：

display:table

告诉元素显示为表。嵌套元素应显示为

表格行

和

表格单元格

，模仿良好的旧TR和TD