将同级元素一个一个地放置

Question

我有一个包含多行的 TABLE 。在每一行中，一个 TD 元素包含多个 DIV 元素，这些元素：

1. 可以具有任何维度，但所有这些元素（在一个 TD 内）都具有相同的像素尺寸
2. 必须放置在另一个
3. 包含 TD 的顶部，需要根据子 DIV 元素调整大小
4. 一个 DIV 将显示在 时间（静态）
5. 从一种衰落变为另一种衰落的 为使用（因此其中两个将同时显示），
6. 同时显示的数量永远不会超过两个

这是此类表格的简化示例

<table>
    <tr>
        <td>Name</td>
        <td>
            <div>First</div>
            <div>Second</div>
            ...
            <div>Last</div>
        </td>
        <td>Additionals</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>
            <div>First</div>
            <div>Second</div>
            ...
            <div>Last</div>
        </td>
        <td>Additionals</td>
    </tr>
    ...
</table>

明显的解决方案是设置

div
{
    position: absolute;
}

这将自动定位 DIV 元素彼此重叠（根据流布局），但 TD 维度将保持不变，就好像它不包含子元素一样。溢出不会执行任何操作，因为子元素是绝对定位的。

td
{
    overflow: auto;
}

我应该如何完成这项工作？

Answer 1

你事先知道div的大小吗？如果是这样，你可以给包装器 div 那些尺寸：

<td>
    <div class="wrapper">
       <div>1</div>
       <div>2</div>
       <div>3</div>
    etc...

如果你不知道尺寸，那么，由于你已经在使用 JS，你可以获取包装器第一个子 div 的尺寸，然后设置通过 JS 的包装尺寸。

更新：

我能想到的用 CSS 单独完成此操作的唯一方法是让第一个 DIV 渲染两次。第一个实例设置为position:relative，然后它是重复的，像其他实例一样，可以设置为position:absolute。这个克隆就像一个垫片。如果您想确保它不会在视觉上显示（但仍占用适当的空间），您可以设置“可见性：隐藏”。然而，这样做的缺点是，您现在的页面上有重复的内容，从 SEO 和/或可访问性 POV 来看，这可能并不理想。

我可能会走 JS 路线并在页面加载后获取尺寸。