2

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

http://jsfiddle.net/cxHNN/

当.contentdiv 内的.activediv 具有最大的高度值时，上面的代码可以正常工作。（inner-3在这种情况下）

但是，如果.active该类设置在任何其他inner元素上（文本较少），则最大元素 ( inner-3) 的内容会溢出（请参见此处的示例）。

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

注意： 不要介意基于像素的边距/宽度。我不得不稍微调整一下 css 以使其工作 jsFiddle。在我的原始样式表中，它们都以 % 或 em 表示。

4

1 回答 1

0

尝试隐藏所有.innerdiv，只显示活动 div？

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

更新：如果您需要内部 div 的大小相同，则不能绝对定位它们，或者浮动它们，或者显示它们隐藏或内联。所以，我做了以下事情：

  • flex 容器是相对定位的，并且给定了足够的内边距，使其内部的元素可以定位在左上角，并正确定位。我还将字体大小设置为 0 并防止换行。
  • 内部 div 显示为 inline-block，宽度为 0
  • 活动内部块的宽度为 100%，因此它是唯一显示的块
  • H1 绝对定位，并放置在您想要的位置

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

您将需要使用填充和间距等东西。哦，我只在 FireFox 上测试过——其他浏览器可能有问题。

于 2012-12-18T06:48:23.303 回答