在下面的小提琴中,我的期望是元素“#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>
答案 0 :(得分: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
元素。
如果你想要实现不同的东西,那么它就不清楚;但是,我很乐意在评论中提供帮助。
答案 1 :(得分:0)
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;
}