相对定位的内容包装器不缩放以适合内容

时间:2013-10-07 05:39:10

标签: css html css-position

在下面的小提琴中,我的期望是元素“#wrap”将垂直缩放以适合它的内容。事实显然并非如此。任何人都可以建议一个简单的修改,使“#wrap”自动缩放以适应它的内容(即没有静态高度)。

fiddle

代码:

#wrap{
    display:block;
    position:relative;
    border:5px solid blue;
}

.inner{
      display:block;
      position:absolute;
      border:1px solid black;
    left:5px;
}

#id1{
    top:0px;
    height:50px;
    width:50px;
    background-color:green;
}

#id2{
    top:50px;
    height:50px;
    width:50px;
    background:red;
}

#id3{
    top:100px;
    height:50px;
    width:50px;
    background:yellow;
}

<div id="wrap">
    <div class="inner" id="id1">hi</div>
    <div class="inner" id="id2"></div>
    <div class="inner" id="id3"></div>
</div>

2 个答案:

答案 0 :(得分:1)

由于.inner div元素的positionabsolute,因此它们将从页面流中取出。因此,任何容器元素都不再看到它们(因此不能扩展以包含它们)。

包含div元素的positionrelative所做的设置允许绝对定位的.inner div元素拥有其leftrighttopbottom属性在其边界框内工作,而不是body元素的边界框。

如果您希望它们只是坐在彼此之上,那么您不需要特别定位任何元素,因为block显示元素(例如div元素)始终位于各自的行上除非floatposition更改。

因此,您需要做的就是摆脱position属性,使其正常工作。

更新了CSS:

#wrap{
    border:solid blue 5px;
}

#id1{
    height:50px;
    width:50px;
    background:green;
}

#id2{
    height:50px;
    width:50px;
    background:red;
}

#id3{
    height:50px;
    width:50px;
    background:yellow;
}

我还删除了display: block;,因为div元素默认显示为block元素。

See JSFiddle here.

如果你想要实现不同的东西,那么它就不清楚;但是,我很乐意在评论中提供帮助。

答案 1 :(得分:0)

jsFidle

HTML:

<div id="wrap">
    <div class="inner" id="id1"></div>
    <div class="inner" id="id2"></div>
    <div class="inner" id="id3"></div>
</div>

CSS:

#wrap{
    display:block;
    position:relative;
}

.inner{
      display:block;
    position:absolute;
}

#id1{
    top:0px;
    left:5px;
    height:50px;
    width:50px;
    background:green;
}

#id2{
    top:0px;
    left:60px;
    height:50px;
    width:50px;
    background:green;
}

#id3{
    top:0px;
    left:115px;
    height:50px;
    width:50px;
    background:green;
}