0

在下面的小提琴中，我的期望是元素“#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>
4

2 回答 2

1

因为.inner div元素有positionof absolute，所以它们被从页面流中取出。因此，任何容器元素都不再看到它们（因此无法扩展以包含它们）。

设置包含div元素的positiontorelative所做的是允许绝对定位的.inner div元素使其left、right、top和bottom属性在其边界框而不是body元素的边界框上起作用。

如果您希望它们简单地相互叠放，那么您不需要专门定位任何元素，因为block诸如元素之类的显示div元素始终位于它们自己的行上，除非由floator更改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元素。

请参阅此处的 JSFiddle。

如果您试图实现不同的目标，那么就不清楚了；但是，我很乐意在评论中提供帮助。

于 2013-10-07T06:47:07.877 回答
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;
}
于 2013-10-07T05:48:49.983 回答