表格单元格内的垂直间距答案

【问题标题】：Vertical spacing inside a table-cell表格单元格内的垂直间距
【发布时间】：2017-10-18 02:32:08
【问题描述】：

我目前正在尝试模拟text-align: justify，但在垂直方向和 div 之间。

我有 4 个 divinside 一个 td 像这样：

<td>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</td>

但是它们的总高度没有td的高度那么高，所以它们都垂直堆叠在中间。有没有办法在它们之间放置一些空间，比如合理的内容？

【问题讨论】：

我想在设计时无法知道 td 的高度是多少，然后将该高度除以 4？
不，高度是不断变化的。每个 div 的高度也在变化。
我使用 flex 容器进行了一些测试 - 请参阅 this fiddle - 它看起来很有希望，但我不相信它会在所有情况下都有效。
问题是，您不能更改表格单元格的display 值并期望它继续按预期工作。所以我不会发布这个答案。
我已经尝试过使用 flexbox，但它只会破坏我表格其余部分的显示，所以我不能真正使用它。

标签： css html-table flexbox justify

【解决方案1】：

好的，所以我设法实现了我想要的。我会把它贴在这里给那些可能有同样问题的人。

基本上你必须将 tr 和 td 的高度设置为 100%。

然后，将您的容器设置为 height: 100% 和 display: flex;，给它一个 justify-content 的 space-around 或 space-between 取决于您的需要。如果您的 div 不一定是 100% 宽度，请不要忘记 flex-direction: column。

HTML

<td>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</td>

CSS

tr,td{
  height: 100%;
}

td>div{
  width: 100%;
  height: 100%;
  padding: 5px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

【讨论】：