Question

好吧，我正在尝试获取几个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.我希望它与它最大的孩子的大小相同。

提前感谢您的帮助！

Answer 1

当您使用position: absolute;从文档流中取出内部div时，外部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
});

Answer 2

设置position：absolute将节点从流中取出，这就是没有任何流内容的父节点获得0x0维度的原因。

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

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

Answer 3

你是否希望#stack的宽度收缩包裹它的孩子，或者你只关心它的高度？我假设后者，因为你明确地将display: block放在上面。

因为在这种情况下，可以只使用CSS：

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

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

在Opera中，当你浮动堆栈（或#stack）并将display: inline-block加到width: 100%时，你可以让{{1}}完全收缩包裹它的子项（也就是宽度）。儿童div。我不知道这是因为Opera中的错误，其他浏览器中的错误，还是因为模糊的规范而产生的差异。

使相对定位的块元素与其包含的绝对定位元素的大小相同

3 个答案: