0

好的，我正在尝试获取几个 div 及其所有内容，并将它们堆叠在一起，并通过以下方法使包含的 div (#stack) 出现在正常的事物流中：

CSS：

#stack
{
    position:relative;
    display:block;
}
#stack div
{
    position:absolute;
    left:0;
}

HTML：

<div id="stack">
    <div>
        <img src="images/1.jpg">
        <p>
            First Image
        </p>
    </div>
    <div>
        <img src="images/2.jpg">
        <p>
            Second Image
        </p>
    </div>
    <div>
        <img src="images/3.jpg">
        <p>
            Third Image
        </p>
    </div>
    <div>
        <img src="images/4.jpg">
        <p>
            Fourth Image
        </p>
    </div>
</div>

哪个有效，除了现在 div#stack 的宽度/高度为 0。我希望它的大小与其最大的孩子相同。

在此先感谢您的帮助！

4

3 回答 3

1

当您使用 将内部 div 从文档流中取出时position: absolute;，外部 div 在任何情况下都不能拉伸到最大孩子的尺寸。您必须使用 javascript 来实现该效果。如果你熟悉 jQuery，你可以使用这样的东西：

var w = false, h = false;

$('#stack div').each(function() {
    w = $(this).width() > w || !w ? $(this).width() : w;
    h = $(this).height() > h || !h ? $(this).height() : h;
});

$('#stack').css({
    width: w,
    height: h
});
于 2009-12-04T20:47:12.517 回答
0

设置 position:absolute 将节点从流中取出，这就是为什么没有任何流动内容的父节点的尺寸为 0x0。

如果您的服务器代码（例如 PHP）知道这些图像，您可以计算它们之间的最大宽度和最大高度，并适当地设置父级的高度/宽度。

或者，正如 Tatu 所说，您可以使用 JavaScript 并在客户端进行操作。

于 2009-12-04T20:49:51.290 回答
0

您是否也希望将其子项的宽度#stack也收缩包装，或者您只是关心它的高度？我假设是后者，因为你明确地穿上display: block了它。

因为在这种情况下，可以只使用 CSS 来做到这一点：

#stack {
    overflow: hidden;
    _zoom: 1;
}       
#stack div {
    float: left;
    margin-right: -100%;
}

我在 IE6 中添加了_zoom: 1触发。hasLayout您可以将其更改为您喜欢的方法（例如，在单独的 IE6 样式表中），或者如果您不需要支持 IE6，则完全不使用它。

在 Opera 中，当您浮动堆栈（或）并添加到子 div时，您可以#stack将其完全收缩包装（即宽度也一样） 。我不知道这是因为 Opera 中的错误，其他浏览器中的错误，还是只是由于规范模糊造成的差异。display: inline-blockwidth: 100%

于 2009-12-04T23:18:25.413 回答