html - 创建类似表的列，其中每一列都是其相邻列的后代

Question

我想创建 3 列。左侧的第一列就像根级别的父级。第二列是第一列的子列，第三列是第二列的子列。

创建带有列的表是非常标准的，但我所知道的所有解决方案都将列作为兄弟。我想把它们作为一个层次结构。这在后代中的内容依赖于其父级的 React 应用程序中很有用。

是否有可能在 html 中实现这一点？从视觉上看，这些列与它们在任何其他表中的外观没有什么不同。我最接近的是：

<div id="column1">
   <div style="width:300px">
      Column 1
   </div>
   <div id="column2" style="float: right;">
      Column 2
      <div id="column3" style="float:right; width:300px;">
         Column 3
      </div>
   </div>
</div>

注意：该表只有一行。第一列和第三列具有固定宽度，而第二列可以根据浏览器窗口大小进行调整。在我上面的代码中，第一列中的内容看起来像是第二列的同级，但不是。第一个 div 是第 1 列。我只在第 1 列的内容周围添加了一个 div，以便稍后调整第 1 列中的内容。

标签： html

Answer 1

想办法：

<div id="column1" style=" display: flex;">
  <div style="width:300px;">
    Column 1
  </div>
  <div id="column2" style="flex-grow: 1;display: flex;">
    <div style="flex-grow: 1;">Column 2</div>
    <div id="column3" style="width: 300px;">
      Column 3
    </div>
  </div>
</div>