javascript - 包装多个叠加的div

Question

TLDR:如何让容器包裹多个叠加的流体高度 div？

我有一个包含一些对象的 div:

<div class="container">
  <div class="a" style="height: 300px;">Tab page a</div>
  <div class="b" style="height: 100px; display: none;">Tab page b</div>
  <div class="c" style="height: 200px; display: none;">Tab page c</div>
  ...
</div>

基于用户操作，我想在 a 淡出时淡入 b(即交叉淡入淡出)。这要求它们都与 container 的左上角对齐。通常，我只是使用 position: absolute; 和默认值 top: 0; 和 left: 0; 来叠加它们。这样做的问题是容器折叠到 0px 高(而不是它的内容的高度，这是我想要的)，因为 a 和 b 已经从流。

好的，所以我不能在 a 和 b 上使用绝对定位。我还能如何让它们重叠？负数 margin-top 也不起作用，因为我不知道 children 的高度(他们可以根据他们的内容动态变化)，并且可能有任意数量的 child 。

如果没有 JS，这甚至可能吗？如果不是，那么不假设 A) container 中的少量子项或 B) 子项是固定大小(提前或以其他方式已知)的最简单方法是什么。

Answer 1

如果您知道交叉淡入淡出元素的尺寸，最好的办法是设置容器元素的高度和宽度，如果您只需要一个宽度/高度，则可以通过 CSS，如果您愿意，可以通过 javascript容器以适应淡入淡出的新维度。

可以在此处看到我描述的 Javascript 方法的实际应用:http://jsfiddle.net/mkd9s/2/

重要的部分是:

// Get Heights
var aHeight = $('.a').height(),
    bHeight = $('.b').height();

// Set Height on Load
$('.container').height( aHeight );

// Fade on Click
$('.fade').on('click', function(event) {
    event.preventDefault();
    $('.a').fadeOut("slow");
    $('.b').fadeIn("slow");
    $('.container').animate({ height: bHeight });
});

首先设置容器的高度，然后在单击按钮时将容器的高度动画化为第二个元素的高度。

请注意，如果容器中的元素超过 2 个，这将很快变得笨拙。