css - 堆叠 DIV 并水平对齐它们

Question

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

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

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

所以我想我想问的是，如何在不显式设置 menuDiv 宽度的情况下使 newDiv 的宽度与 menuDiv 的宽度相同？

这张图展示了我在说什么:

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

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

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

Answer 1

用 display: inline-block; 将它们包裹在一个 block 中.这将使它的宽度适应它的 child 和 child 的最大宽度 <div>元素将与其父元素一样宽。

例如:

<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/ambiguous/gXP7Q/