Question

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

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

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

Answer 1

这是你需要的吗？

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

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

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

Answer 2

你需要职位：绝对吗？如果您不想进行任何排列，则可以使用绝对定位。绝对定位完全取决于元素流的元素。他们一无所知。

您可以使用浮动和技术来包围浮动。我用的是明确的：

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

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

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

Answer 3

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

并#text2重叠#text1，同时为float:left设置margin-left:-30px和设置#text2。

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

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

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