Абсолютно позиционированная оболочка с плавающими дочерними элементами не будет расширяться больше, чем ее родитель.

Мой вопрос дублирует этот вопрос, но для этого мне понадобится решение на чистом CSS, и я не могу использовать JS, чтобы исправить это. Итак, вот мои вопросы:

  1. Почему оболочка не расширяется, хотя она имеет абсолютное позиционирование и не должна ограничиваться своим родителем?
  2. Почему он точно подходит родителю?! Он вообще не должен расширяться, если есть проблема с плавающими детьми!

CSS:

#parent{
    position: relative;
    height: 200px;
    width: 60px;
    background: red;
}

#wrapper{
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
}

#wrapper > div{
    float: left;
    width: 30px;
    background: yellow;
    margin: 1px;
}

HTML:

<div id='parent'>
    <div id='wrapper'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

Вот демонстрация JSiddle.


html css css-position floating
person Peyman    schedule 27.06.2013    source источник
comment
Чтобы уточнить: вы хотите, чтобы синий div был таким же широким, как желтые?   -  person xec    schedule 27.06.2013
comment
Ну, плавающие элементы на самом деле растягивают #wrapper (по умолчанию position: absolute; не имеет полной ширины), но это из-за другого побочного эффекта position: absolute; имеет, он вводит новый контекст форматирования блока, который будет содержать числа с плавающей запятой. (это означает, что если бы желтые элементы div не были плавающими, синий элемент div был бы уже)   -  person xec    schedule 27.06.2013
comment
@xec Извините за мое замешательство. К настоящему времени я так же сбит с толку, как и ОП. Как получается, что когда вы делаете #parent, например. 110 пикселей в ширину, #wrapper также становится шириной 110 пикселей, но если #parent шире, скажем, 300 пикселей, ширина #wrapper равна ширине его содержимого?   -  person Mr Lister    schedule 27.06.2013
comment
@MrLister Это действительно немного сложно и запутанно. 1) #wrapper (abs pos) имеет размер относительно своего ближайшего расположенного предка (#parent), ширина которого фактически будет максимальной шириной #wrapper (если явно не указано иное). 2) #wrapper содержит поплавки и должен быть одновременно квадратным (все элементы) 3) когда поплавки достигают конца строки и собираются перейти к следующей строке, обертка растягивается до он может (полная ширина родителя), даже если весь плавающий блок туда не поместится.   -  person xec    schedule 27.06.2013
comment
@xec Спасибо, я получил ответы. Я думал, что у абсолютных элементов нет ограничений на расширение, но, похоже, я ошибался, и они ограничены своими относительными родителями!   -  person Peyman    schedule 27.06.2013

Ответы (2)


arrow_upward
0
arrow_downward

Это из-за position: relative в родительском div.

Если вы удалите это, а затем добавите right:0 в класс-оболочку, вы увидите, что он расширится до максимальной ширины.

FIDDLE

person Danield    schedule 27.06.2013
comment
Спасибо за ответ, но тогда оболочка будет располагаться относительно тела, а это не то, что я хочу. Мне нужно, чтобы он был расположен относительно родителя. - person Peyman; 27.06.2013

arrow_upward
0
arrow_downward

Если вы уберете относительную позицию из родительского div, это сработает. Но тогда он будет выравниваться по телу, а не по родителю.

Вам нужно будет отрегулировать верхнее и левое положение обертки.

JSFIDDLE

#parent{
    height: 200px;
    width: 60px;
    background: red;
}

#wrapper{
    background: blue;
    position:absolute;
    top: 8px;
    left: 8px;
    right: 0px;
}

#wrapper > div{
    float: left;
    width: 30px;
    background: yellow;
    margin: 1px;
}
person designtocode    schedule 27.06.2013