堆叠 DIV 并水平对齐它们

Question

我正在使用 Drupal，页面顶部有一个菜单栏，其宽度由我添加到其中的任何菜单项定义。

例如，如果唯一的链接是“Home”，那么它的宽度就会非常小。但如果我添加“联系方式”、“关于我们”等，它的宽度就会增加。

我希望能够在包含菜单栏 (menuDiv) 的 div 下方添加另一个 div（称为 newDiv），以便 newDiv 的宽度与 menuDiv 完全相同。

所以我想我要问的是，如何使 newDiv 的宽度与 menuDiv 的宽度相同，而无需明确设置 menuDiv 的宽度？

这张图片显示了我正在谈论的内容：

在此链接，有菜单本身的图片 (menuDiv)，以及菜单下面的 Div 的图片 (newDiv)。我怎样才能使用CSS而不是使用CSS来实现这样的布局：

<table>i should be a div</table>

我已经在CSS中尝试过一些东西，但似乎没有什么能按照我想要的方式工作。任何帮助将不胜感激。

Answer 1

使用 display: inline-block; 将它们包装在一个块中。这将使其宽度适应其子元素的最大宽度，并且子

元素将与其父元素一样宽。

例如：

<div id="outer">
    <div>Here is some stuff and things.</div>
    <div>Here is some stuff and things. Here is some stuff and things.</div>
</div>

以及：

#outer {
    border: 1px solid red;
    display: inline-block;
}
#outer div {
    border: 1px solid green;
}

以及现场演示： http://jsfiddle.net/ambigously/gXP7Q/

Answer 2

您需要在父容器上的 css 中使用绝对定位。更多信息请参见此处。

    #container { position:absolute; }
    .item { padding: 0 0 0 0; }