如何在HTML中创建层级嵌套的三列布局？（适配React场景）

完全能满足你要的「父-子-孙层级嵌套+视觉上和普通表格列一致」的需求，而且这种结构特别适配React里子组件依赖父组件数据的场景。

先说说你现有代码的小问题：用float实现的布局容易出现塌陷、宽度计算不稳定的情况，而且层级嵌套的结构不够直观，不利于后续React组件的拆分和维护。

给你推荐两种更可靠的现代CSS布局方案，完美匹配你的需求：

方案一：Flexbox（推荐，更适配组件嵌套场景） #

这种方式的结构完全对应你要的层级关系：column1（根父元素）包含自身内容和column2（子元素），column2包含自身内容和column3（孙元素），同时视觉上是三列并排的效果，和普通表格列毫无差异。

<div id="column1" style="display: flex; width: 100%;">
  <!-- 第一列：根级父元素内容，固定宽度 -->
  <div style="width: 300px; border: 1px solid #ccc; padding: 8px;">
    Column 1（根级父元素）
  </div>
  
  <!-- 第二列：第一列的子元素，作为flex容器承载自身内容和第三列 -->
  <div id="column2" style="display: flex; flex: 1;">
    <!-- 第二列自身内容：自适应剩余宽度 -->
    <div style="flex: 1; border: 1px solid #ccc; padding: 8px;">
      Column 2（第一列的子元素，自适应宽度）
    </div>
    <!-- 第三列：第二列的子元素，固定宽度 -->
    <div id="column3" style="width: 300px; border: 1px solid #ccc; padding: 8px;">
      Column 3（第二列的子元素）
    </div>
  </div>
</div>

关键细节解释： #

• #column1设置display: flex让内部元素横向排列，宽度100%占满容器
• 第一列内容块固定width: 300px，满足你的固定宽度要求
• #column2设置flex: 1，自动占据第一列和第三列之外的所有剩余空间，实现自适应
• #column2自身也设为flex容器，让内部的第二列内容和第三列并排，视觉上和普通三列表格完全一致

这个结构在React里特别好用：你可以把Column2封装成独立组件，接收Column1的状态或props；Column3再封装成组件，接收Column2的状态，完美实现子组件依赖父组件数据的逻辑。

方案二：CSS Grid（适合更规整的表格类布局） #

如果你想要更贴近原生表格的规整布局，也可以用Grid实现层级嵌套：

<div id="column1" style="display: grid; grid-template-columns: 300px 1fr 300px; width: 100%;">
  <!-- 第一列内容 -->
  <div style="border: 1px solid #ccc; padding: 8px;">
    Column 1（根级父元素）
  </div>
  
  <!-- 第二列：第一列的子元素，跨列后再拆分出自身内容和第三列 -->
  <div id="column2" style="grid-column: 2 / span 2; display: grid; grid-template-columns: 1fr 300px;">
    <!-- 第二列自身内容 -->
    <div style="border: 1px solid #ccc; padding: 8px;">
      Column 2（第一列的子元素）
    </div>
    <!-- 第三列：第二列的子元素 -->
    <div id="column3" style="border: 1px solid #ccc; padding: 8px;">
      Column 3（第二列的子元素）
    </div>
  </div>
</div>

不过相比Flexbox，Grid的层级嵌套在组件拆分时灵活性稍弱，所以更推荐Flexbox方案。

为什么这两种方案比你原来的float更好？ #

• 布局更稳定，不会出现float常见的高度塌陷、对齐偏差问题
• 层级结构清晰，完全符合你要求的父-子-孙嵌套关系
• 自适应宽度的计算更可靠，现代浏览器兼容性拉满

内容的提问来源于stack exchange，提问作者Johann