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。

通过宽度：100px可以轻松完成之前的操作;在顶部和底部div。但是，当我登录时，用户框将显示在两个导航菜单下方。我认为解决这个问题的一种方法是使宽度不总是100％。有没有办法让我的用户框在右边？

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

作为参考，我有左上方浮动的顶部和底部标题，右边的标题浮动。谢谢

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。

css头中的最大宽度

1 个答案: