Question

我在尝试在相对定位元素内部创建一个灵活的绝对定位元素时遇到问题。这是代码：

当.content div中的.active div具有最大高度值时，上述代码可以正常工作。（在这种情况下为inner-3）

但是如果.active类设置在任何其他inner元素上（文本较少），则来自最大元素（inner-3）的内容会溢出（see example here）。

我可以使用JavaScript来解决这个问题，但是我想要一个纯粹的css解决方案来解决这个问题，这样所有inner个元素都具有相同的高度，而不会给出一个固定高度，这样它们的高度就会动态变化为容器宽度发生变化（在响应式布局中）。

注意： 没关系基于像素的边距/宽度。我不得不稍微调整一下css以使其工作jsFiddle。在原始样式表中，它们都是％或ems。

Answer 1

尝试隐藏所有.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显示为内联块，宽度为0
活动内部块的宽度为100％，因此它是唯一显示
H1绝对定位，并放置在您想要的位置

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

你需要玩填充和间距和东西。哦，我只在FireFox上测试过这个问题 - 其他浏览器可能存在问题。

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

1 个答案: