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

Question

当容器 div 的大小已知时，很容易使两个 div 重叠，但是如果 div 高度不能呢？

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

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

score 2 · Accepted Answer

这是你需要的吗？

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

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

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

score 0 · Accepted Answer

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

并通过同时设置和设置来进行#text2重叠。#text1float:leftmargin-left:-30px#text2

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

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

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

score 0 · Accepted Answer

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

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

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

不要忘记添加<div class="cl-left"> </div>.

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

3 回答 3