CSS 通过保留父级大小来重叠元素

Question

我想在不使用 position: absolute 的情况下重叠一些元素。因此，原因是我有几个垂直部分(不应重叠)包含重叠的元素。问题是，我无法事先知道重叠元素或重叠元素是否具有更大的尺寸。如果其中一个接收到 position: absolute ，它将脱离流程，因此父容器的大小不会相应调整，并且这些部分会重叠。我已经找到了这个问题，但似乎没有人回答这个问题。这是一个例子: http://jsfiddle.net/nNhtU/

Answer 1

如果可以使用 jQuery，这可以很容易地完成。设置父元素的overflow属性为scroll:

.designer-question {
    overflow: scroll;
}

然后您可以使用简单的 each 循环将每个 .designer-question 的高度设置为其 img 的高度:

$('.designer-question').each(function () {
    var $el = $(this);                   // Get jQuery of each designer question
    var $backImg = $('.back img', $el);  // Get background image
    $el.css('height', $backImg.height());
});

我已将此应用于您的 jsfiddle 以进行演示:http://jsfiddle.net/jfdPb/1/