css - 表格单元格内的垂直间距

Question

我目前正在尝试模拟一个 text-align: justify，但是是垂直的并且在 div 之间。

我在 td 中有 4 个 div，如下所示:

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

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

Answer 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;
}