css - 堆叠DIV并将其水平对齐

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

因此，例如，如果唯一的链接是“ Home”，则其宽度将非常小。但是，如果我添加“联系人”，“关于我们”等，其宽度将会增加。

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

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

这张照片显示了我在说什么：



在此链接中，有菜单本身的图片（menuDiv），以及位于其下方的Div的图片（newDiv）。如何使用CSS而不是使用以下方法实现此类布局：

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

我已经尝试过CSS中的功能，但似乎没有任何效果。任何帮助，将不胜感激。

最佳答案

用display: inline-block;将它们包装在一起。这将使其宽度适应其子项的最大宽度，并且子<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/

关于css - 堆叠DIV并将其水平对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7129962/