html - 让 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元素 aoverflow: hidden以清除浮动，但它也不起作用。相反，它会将dt元素剪掉。

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

score 0 · Accepted Answer

absolute定位将元素移出正常流程。因此，你dl所谓的空，dt是在另一层。

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

1 回答 1