如何用CSS、HTML实现无列且行高动态自适应的类表格布局？

修正后的HTML结构 #

<div class="accident-container">
  <!-- 顶部左右分栏区域 -->
  <div class="top-section">
    <div class="left-col">
      <div class="row">
        <div class="css-field">
          <span class="css-label">发起方:</span>
          <span class="css-value">{{accident.initiator}}</span>
        </div>
      </div>
      <div class="row">
        <div class="css-field">
          <span class="css-label">事故时间:</span>
          <span class="css-value">{{accident.time}}</span>
        </div>
      </div>
    </div>
    <div class="right-col">
      <div class="row">
        <div class="css-field">
          <span class="css-label">事故地点:</span>
          <span class="css-value">{{accident.location}}</span>
        </div>
      </div>
      <div class="row">
        <div class="css-field">
          <span class="css-label">事故等级:</span>
          <span class="css-value">{{accident.level}}</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部区域 -->
  <div class="bottom-section">
    <div class="css-field">
      <span class="css-label">事故详情:</span>
      <span class="css-value">{{accident.details}}</span>
    </div>
  </div>
</div>

对应的CSS样式 #

/* 外层容器：控制整体布局，溢出时可滚动 */
.accident-container {
  width: 100%;
  max-width: 800px; /* 可根据需求调整 */
  border: 1px solid #000;
  overflow: auto;
}

/* 顶部区域：左右分栏 */
.top-section {
  display: flex;
  border-bottom: 5px solid black; /* 顶部与底部区域的分隔线 */
}

/* 左右栏样式 */
.left-col, .right-col {
  width: 50%;
}

.right-col {
  border-left: 5px solid black; /* 左右栏之间的竖线分隔 */
}

/* 行容器：不固定高度，由内容撑开 */
.row {
  min-height: 40px; /* 设置最小高度保证布局整齐 */
  border-bottom: 1px solid #000;
  padding: 8px;
  display: flex;
  align-items: center; /* 垂直居中内容 */
}

/* 字段容器：label和value的布局 */
.css-field {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* 内容过长时换行 */
  gap: 8px;
}

/* 标签样式 */
.css-label {
  font-weight: bold;
  white-space: nowrap; /* 标签不换行 */
}

/* 值样式：自适应宽度，换行显示 */
.css-value {
  flex: 1;
}

/* 底部区域样式 */
.bottom-section {
  padding: 12px;
}

关键调整说明 #

• 层级结构：明确划分外层容器、顶部分栏区域、底部区域，完全匹配需求的三层结构
• 顶部分栏：通过display:flex实现左右各50%宽度的布局，添加竖线分隔左右栏
• 行高自适应：去掉固定height，改用min-height，当内容超出时自动撑开行高
• 内容换行：css-field使用flex-wrap: wrap，css-value设为flex:1，保证内容过长时自动换行，不会溢出
• 布局对齐：通过align-items: center让行内内容垂直居中，提升视觉整齐度

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