相對定位的內容包裝不能縮放以適應內容

Question

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

Answer 1

因爲.innerdiv元素有position的absolute，所以它們被取出頁面的流程。因此，任何容器元素都不再看到它們（因此不能擴展來包含它們）。

什麼設置包含div元素的position到relative的作用是允許絕對定位.innerdiv元素有自己的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; 
} 

因爲div元素被顯示爲block元素默認情況下，我也刪除display: 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; 
}