html - css header 中的最大宽度

Question

基本上，我的 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>

从某种意义上说，当用户登录时，我希望用户框出现在顶部和底部导航菜单的右侧。但是，如果他们没有登录，我想让标题展开整个宽度的屏幕。我有做后端的 PHP。

前一个很容易完成 width: 100px;在顶部和底部 div 上。但是，当我登录时，用户框出现在两个导航菜单下方。我想解决这个问题的一种方法是让宽度不总是 100%。有什么方法可以让我的用户框仍然在右边吗？

我试过使用 max-width，但我认为它没有定义。

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

Answer 1

这是可能的 <table>布局很容易。但是由于您的问题涉及 <div> elements 并且我假设你想要一个 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 tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TR's and TD's.