Question

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

可以包含任何维度，但所有维度（在TD内）都具有相同的像素维度
必须一个位于另一个
包含TD需要根据子DIV元素
一次显示一个DIV（静态）
当使用从一个渐变到另一个渐变时（将同时显示其中两个）
同时显示的内容绝不会超过两个

这是这种表的简化示例

<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的大小吗？如果是这样，你可以给这些维度包装：

<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路线并在页面加载后抓住尺寸。

将兄弟元素一个放在另一个上面

1 个答案: