Question

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

代码：

#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>

Answer 1

由于.inner div元素的position为absolute，因此它们将从页面流中取出。因此，任何容器元素都不再看到它们（因此不能扩展以包含它们）。

包含div元素的position至relative所做的设置允许绝对定位的.inner div元素拥有其left ，right，top和bottom属性在其边界框内工作，而不是body元素的边界框。

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

因此，您需要做的就是摆脱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.

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

Answer 2

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

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

2 个答案: