html - 具有浮动子级的绝对定位包装器不会比其父级扩展更多

Question

我的问题是这个问题的重复，但我需要一个纯 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 演示。

Answer 1

这是因为position: relative在父 div 上。

如果您删除它然后添加right:0包装类 - 那么您会看到它扩展到最大宽度。

小提琴

Answer 2

如果您从父 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;
}