Почему эффект позиционирования div width?

Question

Я играл с моим веб-приложением, чтобы попытаться получить div, чтобы обернуть некоторые элементы p. Структура выглядит следующим образом, то есть псевдо-код ...

<div id='outer'> 
    <p></p> 
    <p></p> 
    <p></p> 
</div> 

То, что я обнаружил, что если установить внешний DIV на

position:absolute; 

вместо

position:relative 

, что div будет правильно обертывать только p элементов.

В противном случае он будет простираться до самого самого края страницы, и мне ранее нужно было установить ширину вручную.

Что управляет этим поведением?

Кроме того, р метки используют

display:inline 

и содержащий DIV просто использует дисплей по умолчанию.

Этот CSS ниже хорошо работает в моем приложении.

// outer div 

#mi_control { 
    position: absolute; 
    left: 580px; 
    top: 660px; 
    width: auto; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 

// p elements 

.menu_bottom { 
    margin-left: 18px; 
    display: inline; 
} 

Answer 1

Поведение регулируется спецификацией. Абсолютные позиционированные элементы имеют специальные правила о том, как рассчитываются значения ширины: http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width и http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width

Answer 2

Это общая проблема ..

I quote:

Вопрос: относительная ДИВ принимает ширину 100% автоматически, но абсолютное ДИВ занимает только ширину содержимого. Зачем?

Ответ: Установка position:absolute удаляет элемент в вопросе от нормального течения структуры docment. Поэтому, если вы явно не задали ширину, она не будет знать, насколько она будет широка. вы можете явно установить width:100%, если это тот эффект, который вам нужен.

Answer 3

По умолчанию элемент div имеет значение display: block;. Элементы блока будут составлять 100% от ширины родительского элемента.

Когда вы устанавливаете элемент на position: absolute;, он вынимает его из потока документов, и элемент больше не зависит от родительского элемента. Однако это может испортить ваш макет.

Моя рекомендация состоит в том, чтобы установить элемент div в display: inline-block; - это сделает его размером согласно его содержимому, но не удалит его из потока документа.

#outer 
{ 
    display: inline-block; 
} 

Answer 4

Я не знаю точно, какие правила регулируют это поведение, но то, что вы наблюдаете, является правильным поведением и является последовательным во всех браузерах. DIV принимает минимальную ширину, когда ее позиция установлена ​​на абсолютную или фиксированную; в противном случае требуется полная доступная ширина.

Answer 5

Как только он настроен на абсолютное значение, он выводится из обычного потока содержимого. Абсолютно позиционированные элементы всегда появляются в верхнем левом углу, если не указано иное.Элемент также будет уменьшаться настолько, насколько это необходимо, потому что так работает position:absolute

div s имеет ширину 100%, поэтому вам необходимо установить ширину вручную. Относительно расположенные элементы ведут себя почти идентично статически расположенным элементам. Единственная разница в том, как они могут быть перемещены.

Answer 6

Значение по умолчанию для width для элемента div: auto.

Это означает, что это займет полностью доступное пространство или больше, если содержимое заставляет его. Однако, если вы используете position: absolute, вы берете элемент из потока документов. Поскольку нет ничего, что он может больше связать с полной шириной, он будет использовать ширину, которую содержимое заставляет использовать.

Answer 7

Не уверен, что вы видите, но даже если ваш DIV позиционируется абсолютно, он все равно будет обернуть P теги

http://jsfiddle.net/8MSDH/

вы видите его в правом нижнем углу, потому что вы установите верхний и левый

left: 580px; 
top: 660px;