Question

我正在构建一个在3个引号之间旋转的轮播/幻灯片式小部件。让我们说标记看起来像这样：

<div class="carousel">
  <blockquote>...</blockquote>
  <blockquote>...</blockquote>
  <blockquote>...</blockquote>
</div>

我希望三个引号重叠到位，然后我们转换它们的opacity属性来创建淡入/淡出过渡。我的CSS看起来像这样：

.carousel{
  position: relative;
}
.carousel blockquote{
  position: absolute;
  top: 0px;
  left: 0px;
}

现在，如果我将其保留，.carousel div将默认为height 0px，并且不会将页面的其余部分推下来。

所以我需要指定一个高度，但问题是每个引号可以有不同的长度，因此每个blockquote可以有不同的高度。

所以我的问题是：我怎样才能确保.carousel div延伸到最适合blockquote的最大高度？

我更喜欢纯CSS解决方案，但如果它不存在，优雅的JS或jQuery解决方案也适用于我。

Answer 1

这是我自己的答案，使用一个简单的jQuery循环来找出哪个blockquote是最高的：

  var tallest = 0;
  $('blockquote').each(function (i, e){
    var h = $(e).height();
    tallest =  h > tallest ? h : tallest;
  });
  $('.carousel').height(tallest);

Answer 2

事实证明，没有JavaScript，是可能的！所有支持Hugo Giraudel寻找解决方案的道具：

http://codepen.io/HugoGiraudel/pen/d6006e5bb32f13d50d1ab07d6cadbc8f?editors=010

诀窍是float所有的块引用并给它们width 100％。然后Hugo能够使用margin-left: -100%;代替position: absolute和top: 0px来重叠它们，这不会破坏布局的正常流程。

请注意，其中的JS代码仅用于为每个blockquote的不透明度设置动画（也可以在CSS中完成，但这是另一个问题），而不是设置布局。

Answer 3

我猜你最终可以做的是尝试垂直居中每个块面，这样无论它们的大小如何，即使它们溢出容器高度，它们仍然保持居中？

使用该方法可能是：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 4

经典问题，没有javascript无法解决。

如果你想在没有javascript的情况下这样做，我想你可以使用这样的脏黑客:(如果你知道宽度至少......）

<style>

    .carousel{
      position: relative;
      border: solid 1px #000;
    }
    .carousel blockquote{
        float: left;
        width: 300px;
    }
    .carousel blockquote.next{
        float: left;
        margin-left: -340px;
        width: 300px;
    }

</style>

<div class="carousel">
    <blockquote>...</blockquote>
    <blockquote class="next">...<br>second</blockquote>
    <blockquote class="next">...<br>...<br>third</blockquote>
</div>

制作重叠内容的容器适合最大的孩子的高度

4 个答案: