如何在 CSS 中使 2 个单元格的高度相互独立？答案

【问题标题】：How to make 2 cells independent from each other in height in CSS?如何在 CSS 中使 2 个单元格的高度相互独立？
【发布时间】：2020-10-17 05:08:36
【问题描述】：

我正在尝试列出我的业务服务。我想象一个 16:9 显示器上的两个单元看起来像 this。

我想用 HTML 格式的表格来做这个：

<table style="width:100%">
  <tr>
    <th>service</th>
    <th>service</th>
  </tr>
  <tr>
    <td>text text text </td>
    <td>text</td>
  </tr>
  <tr>
    <th>service</th>
    <th>service</th>
  </tr>
  <tr>
    <td>text text text text</td>
    <td>text text</td>
  </tr>
</table>

这确实有效，但右侧较长的文本会停在左侧下一个服务标题的开头。我想让左边的单元格独立于右边。

我该如何解决这个问题？

【问题讨论】：

你要求可以使用div吗？如果是这样，请使用 flex 或 grid，这最适合此用例。
您实际上是在使用表格来存储表格数据吗？您的“想象力”显示了布局，但您的示例显示了表格数据。前者对table元素的使用不好，但后者是。
@HereticMonkey 我将其用作“技巧”。有什么更好的方法呢？
@Manjuboyz 我没有要求。如果你愿意，你可以写一个解释 flex 和 grid 的答案。那太好了！
Stack Overflow 上有很多关于如何在没有表格的情况下使用 CSS 创建两列布局的问题和答案。

标签： html css html-table

【解决方案1】：

你可以从这个开始：

fiddle 玩游戏。

.MainDiv {
  height: 800px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  padding: 10px;
}

.leftDiv {
  height: 800px;
  width: 50%;
  border: 1px solid blue;
  margin: 10px;
}

.rightDiv {
  height: 800px;
  width: 50%;
  border: 1px solid blue;
  margin: 10px;
}

<div class="MainDiv">

  <div class="leftDiv">
    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left

    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
    left left left left left left left


    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
  </div>
  <div class="rightDiv">
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    Right right right right right right
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
  </div>
</div>

【讨论】：