让dl元素识别其dt元素内容

Question

我有两个以下的CSS代码：

dl.set {
    position: relative;
}

dl.set dt {
    position: absolute;
    border: 1px solid #000;
}

以及以下HTML：

<dl class="set">
    <dt><img src="images1.jpg" /></dt>
    <dt><img src="images2.jpg" /></dt>
    <dt><img src="images3.jpg" /></dt>
</dl>

我的目标是安排图像在不同的位置彼此重叠。所以我认为我可以做的是利用top位置的bottom和absolute属性来安排他们的位置。

但是，dl元素无法识别其中的dt元素内容。 dl元素框的高度保持为0px。我尝试给dl元素overflow: hidden清除浮点数，但也不工作。相反，它会关闭dt元素。

如何让dl元素相应地根据dt元素的内容大小来识别和扩展其大小，同时保持其位置relative和{{1关系（因为我需要以不同的方式定位元素）？

Answer 1

absolute定位会将元素移出正常流程。因此，您的dl似乎是空的，dt位于另一层。

如果您定位dt绝对值，dl将永远不会扩展为dt的大小（自动）。您需要重新构建HTML / CSS或提出JavaScript解决方案。