两个div与可变高度=无高度重叠的容器

当容器div的大小已知时，使两个div重叠是非常容易的，但如果div高度不能？两个div与可变高度=无高度重叠的容器

我试图做没有操纵容器高度： http://jsfiddle.net/AJfAV/ 但#text2走了过来#text3不“推”了。 #container如何自动调整大小？

我管理使用jQuery用户界面来实现我的目标，但我觉得这不是一个完美的解决方案： http://jsfiddle.net/AJfAV/6/

来源

2013-05-09 user1707414

如果＃容器的宽度是固定的，它会出现问题吗？ – 2013-05-09 21:40:39

这是你需要什么？

Updated fiddle:

我设置height为默认，auto，使用jQuery，是这样的：在CSS height: auto;：

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

您还可以设置。

来源

2013-05-09 15:44:49 flavian

它不起作用。至少我期望的方式。 – user1707414 2013-05-09 17:03:15

我添加了一个解决方案，以准确显示我的期望，但我很惊讶容器的高度必须修复http://jsfiddle.net/AJfAV/5/。在你的解决方案/小提琴中，“text3：这应该出现在text1和text2下面”不出现在text1下面。 – user1707414 2013-05-09 18:25:58

你需要位置：绝对？如果您不想做任何安排，但可以使用绝对定位，但可以使用绝对定位。绝对定位将元素完全排除在元素流之外。他们对它的存在一无所知。

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

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

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

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

http://jsfiddle.net/AJfAV/7/

来源

2013-05-09 19:26:58 Salomonder

事实上，我并不需要绝对的。我想保持元素流动的原样，但是我无法找到没有位置的解决方案：绝对。 – user1707414 2013-05-09 19:43:49

你可以使用浮动，但CSS表不会工作，因为衰落会影响显示属性。此外，利润率不适用于表格单元格。 – Salomonder 2013-05-09 21:47:25

我误解了吗？ – Salomonder 2013-05-09 22:29:25

这可以，如果你删除的#text1和#text2绝对定位来解决。

and make #text2 overlapping #text1 by float:left and set margin-left:-30px for #text2。

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

现在的问题是，当#text1被触发，#text2会浮到左上角的#container，这种情况发生因为jQuery在元素上设置display:none当切换完成。

现在解决这个问题，把＃文本1和＃text2的容器内用相同的宽度，所以当它被设置为display:none#text不影响流量，还必须的#text1在容器上设置min-height:1px。

现在它正在按预期工作http://jsfiddle.net/MyyF6/1/

来源

2013-05-09 22:45:04

两个div与可变高度=无高度重叠的容器

回答

相关问题