絕對位置在相對位置內的問題

我有一個問題，試圖在相對定位元素內部設置一個靈活的絕對位置元素。下面是代碼：絕對位置在相對位置內的問題

http://jsfiddle.net/cxHNN/

上面的代碼工作正常時，.content DIV的.active DIV中具有最大高度值。（在這種情況下inner-3）

但如果.active類設置任何其他inner元（以較少的文本）上，從最大的元素（inner-3）的內容溢出（see example here）。

我可以使用JavaScript解決這個問題，但是我想要一個純CSS解決方案來解決這個問題，因此所有inner元素的高度都是相同的，沒有給出固定高度，因此它們的高度會動態地改變，寬度更改（在響應式佈局中）。

注意： Nevermind基於像素的邊距/寬度。我不得不調整一下CSS讓它工作jsFiddle。他們都在我的原始樣式表中％或ems。

來源

2012-12-18 qais

嘗試隱藏所有.inner div，並只顯示活動的div？

.inner .content { 
    background: none repeat scroll 0 0 #CCCCCC; 
    margin-top: -4em; 
    padding: 0.5em; 
    display: none;} 
.inner.active .content{ 
    display: block; 
    }

UPDATE：如果你需要內部的div是相同的大小，你絕對不能放置它們，或者把它們飄浮，或顯示其隱藏或內聯。所以，我已經完成了以下內容：

柔性容器被放置在相對位置，並給予足夠的填充以使其內部的元素可以放置在左上方，並且位置正確。我也設置了字體大小0，並防止包裝。
內的div顯示內聯塊，與活性內部塊被賦予一個100％的寬度的0
的寬度，使得其示出
的的H1是絕對定位的唯一的一個，並置於你想讓他們

http://jsfiddle.net/cxHNN/4/

您將需要填充和間距和東西玩。哦，我只在FireFox上測試過 - 這可能與其他瀏覽器有關。

來源

2012-12-18 06:48:23

正如我所提到的，我需要所有內部元素的高度相同 – qais

在這種情況下，您必須將所有內部div設置爲靜態或相對，以確保它們都對尺寸起作用。也許可以同時使用'display：inline-block'，'visibility：hidden'和'width：0px'（顯然對活動div使用'visibility：visible'和'width：auto'）？ –

我試過了，但沒有解決。你可以在這裏試試看：http://jsfiddle.net/cxHNN/1/ – qais

絕對位置在相對位置內的問題

回答

相關問題