堆叠DIV和水平对齐

Question

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

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

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

所以我想我要问的是，我怎样才能使newDiv的宽度与menuDiv的宽度相同，而不需要设置menuDiv的宽度？

这张照片显示了我说的：

在这个环节，有菜单本身（menuDiv）的照片，并在div的它下面的图片（newDiv）。在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/ambiguous/gXP7Q/

Answer 2

您将需要在父容器上的CSS中使用绝对定位。更多可以找到here。

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