Question

我的问题是this question的重复，但我需要一个纯CSS解决方案，不能使用JS来修复它。所以这是我的问题：

为什么包装器不会扩展，尽管它是绝对定位的，不应该局限于它的父级？
为什么它完全适合父母？！如果漂浮的孩子有问题，它根本不应该扩展！

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 demo。

Answer 1

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

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

<强> FIDDLE

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;
}

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

2 个答案: