绝对位置在相对位置内的问题

我有一个问题，试图在相对定位元素内部设置一个灵活的绝对位置元素。下面是代码：绝对位置在相对位置内的问题

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

绝对位置在相对位置内的问题

回答

相关问题