Укладка DIVs и их горизонтальное выравнивание

Question

Я использую Drupal, и у меня есть строка меню в верхней части страницы, ширина которой определяется параметрами пунктов меню, которые я добавляю.

Так, например, если единственная ссылка«Дом», он будет иметь очень маленькую ширину.Но если я добавлю «Контакт», «О нас» и т. Д., Его ширина увеличится.

Я хочу добавить еще один div (назовите его newDiv) ниже div, который содержит строку меню (menuDiv), так что newDiv будет иметь ту же ширину, что и menuDiv.

Итак, я предполагаю, что я спрашиваю, как сделать ширину newDiv такой же, как ширина menuDiv без каких-либо дополнительных настроекширина menuDiv?

Это изображение показывает то, о чем я говорю:

По этой ссылке находятся изображения самих меню (menuDiv),и изображение Div под ним (newDiv).Как я могу добиться таких макетов, используя CSS и НЕ используя:

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

Я пробовал что-то в CSS, но, похоже, ничего не работает так, как я хочу.Любая помощь будет оценена.

Answer 1

Оберните их в блок с помощью 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/

Answer 2

Вам нужно будет использовать абсолютное позиционирование в css на родительском контейнере. Больше можно найти здесь .

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