两个 div 与可变高度重叠 = 容器上没有高度答案

【问题标题】：Two div overlapping with variable height = without height on container两个 div 与可变高度重叠 = 容器上没有高度
【发布时间】：2013-05-10 06:45:04
【问题描述】：

在容器div的大小已知的情况下，很容易让两个div重叠，但如果div的高度不知道怎么办？

我尝试在不操纵容器高度的情况下做到这一点： http://jsfiddle.net/AJfAV/ 但是#text2 越过#text3 并且不要“推动”它。 #container 如何自动调整大小？

我设法使用 jquery ui 实现了我的目标，但我觉得这不是一个优雅的解决方案： http://jsfiddle.net/AJfAV/6/

【问题讨论】：

【解决方案1】：

这是你需要的吗？

我正在使用 jQuery 将 height 设置为默认值 auto，如下所示：

$("#container").css("height", "auto");

您也可以在 CSS 中设置：height: auto;。

【讨论】：

我添加了一个解决方案来准确显示我的预期，但我很惊讶容器的高度必须固定jsfiddle.net/AJfAV/5。在您的解决方案/小提琴中，“text3：这应该出现在 text1 和 text2 下方”不会出现在 text1 下方。

【解决方案2】：

你需要位置：绝对吗？如果您不想做任何排列，但要放置，则可以使用绝对定位。绝对定位使元素完全脱离元素流。他们对它的存在一无所知。

您可以使用浮点数和一种技术来包围浮点数。我正在使用清除：

.cl-left {
    clear: left;
    height: .1px;
    font-size: 0;
    line-height: 0;
}

别忘了加<div class="cl-left">&nbsp;</div>。

此外，使用负边距。因此，#text2 被钉在了右边。

【讨论】：

【解决方案3】：

如果您删除了#text1 和#text2 的绝对定位，则可以解决此问题。

并通过将float:left 和margin-left:-30px 设置为#text2 来使#text2 重叠#text1。

现在让我们测试一下：http://jsfiddle.net/RPe4H/

现在的问题是当#text1 被切换时，#text2 将浮动到#container 的左上角，这是因为 JQuery 在切换完成时在元素上设置了display:none。

现在要解决这个问题，将#text1和#text2放在相同宽度的容器中，这样#text设置为display:none时不会影响流量，另外你必须在容器上设置min-height:1px #text1.

【讨论】：