重叠两个div并“清除”其父div [英] Overlapping two divs and 'clearing' their parent div

问题描述

我的CSS-fu在这里让我失望：
我想做的是将两个子div（具有可变高度）重叠放置。

My CSS-fu is letting me down here: What I'd like to do is position two child divs (with variable heights) to be overlapping.

使用：位置：绝对值；顶部：0px；左：0px； 是我唯一知道的方法，将父级设置为 position：relative 。

Using: position: absolute; top: 0px; left: 0px; is the only way I know how, with the parent set to position: relative.

这个问题是，子div按照CSS规范从布局中取出，将父div缩小到高度：0px，因此我无法清除该div并将任何内容放在下面。

The problem with this is that the child divs are taken out of the layout as per the CSS spec, shrinking the parent div to height: 0px, so that I can't clear that div and put any content below.

下面我惊人的ASCII艺术详细说明了我要做什么...任何想法？

My amazing ASCII art below details what I'm going for... any ideas?

As顺便说一句，我需要这些div完全重叠以平滑jQuery淡入淡出，也许还可以尝试一些新的Webkit转换，例如Apple的cardflip演示：
https://developer.apple.com/library/archive/samplecode/CardFlip/Introduction/Intro.html

As an aside, I need these divs to be overlapping exactly for smooth jQuery fades, and maybe trying out some of the new Webkit transforms, a la Apple's cardflip demo: https://developer.apple.com/library/archive/samplecode/CardFlip/Introduction/Intro.html

如果还有另一种方法可以使它们在CSS中完全重叠，并且/或者如果还有另一种方法来获得类似Cardflip的动作（使用jQuery或Webkit / CSS），则两个variab的子div

If there's another way to get them overlapped exactly in CSS, and/or if there's another way to get cardflip-like action (using jQuery or Webkit/CSS) with two child divs of variable heights, I'm all ears!

|-------------------------------------------------|
|  Parent div                                     |
|  |-------------------------------------------|  |
|  |                                           |  |
|  |          DIVS 1 & 2 (overlapped)          |  |
|  |                                           |  |
|  |-------------------------------------------|  |
|-------------------------------------------------|

...more content below, after clearing the parent...

推荐答案

将其中一个设置为 postition：absolute 怎么样？这样，一个子div仍将为父div赋予高度，但另一子div将被删除。

How about just setting one of them to postition:absolute? That way one child div will still give height to the parent div, but the other will be taken out of the flow.

.parent { position: relative; }
.child1 { position: absolute; top:0; left:0; }
.child2 { position: relative; }

只是一个jQuery建议：

Just a jQuery suggestion:

var height1 = $(".child1").height();
var height2 = $(".child2").height();
if(height1 > height2)
    $(".child2").height(height1);
else
    $(".child1").height(height2);

现在您将在两个< div> 的

这篇关于重叠两个div并“清除”其父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！