確保內容在絕對定位元素下方結束

Question

所以，我有一些按鈕可以擴展div，並在其下面放置一些內容。 我想將它們放置在一個順序中，以便展開後的內容恰好位於將會展開它的按鈕之後。這是因爲我想要的選項卡順序是：

1. 標籤，一個按鈕，單擊它
2. 標籤通過擴大內容
3. 標籤到下一個按鈕或選項卡的內容如下

爲了達到這個目的，我將擴展內容定位爲絕對位置。到現在爲止還挺好。現在的問題是擴展後的容器沒有被推下來。

看到這裏頁面和代碼：http://niklasholmberg.se/temp/tab1.html

我的第一個解決方案，這是衡量擴展div的高度，並補充說，作爲填充到一個容器，是應下推內容之前。

看到這裏頁面和代碼：http://niklasholmberg.se/temp/tab2.html

我不太喜歡的解決方案和想要的東西，不需要腳本，以獲得正確的佈局。

• 我可以以某種方式讓類組的div也「包裝」絕對定位的容器嗎？
• 我可以以某種方式定位擴展的div的另一種方式，不使用絕對位置，但達到相同的結果嗎？
• 或者，也許某人有這個案例的完整的其他解決方案。

感謝

Answer 1

好吧，

你可以在這種情況下，用相對位置來擴大格，即文章。

<article id="content1" class="expandarticle"> 
    <h1>Content 1</h1> 

    <a href="test">aa</a> 
    <button>bb</button> 
    <input type="text"> 
    </article> 

你的CSS應該是

.expandarticle { 
    background: none repeat scroll 0 0 #ccc; 
    display: table; 
    left: 0; 
    padding: 10px; 
    position: relative; 
    right: 0; 
}