Question

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

我在div内有4个td，如下所示：

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

但是它们的总高度并不像td的高度那么高，所以它们都在中间垂直堆叠。有没有办法在它们之间留出一些空间，就像一个合理的内容？

Answer 1

好的，所以我设法实现了我想要的。我会在这里发布可能存在相同问题的人。

基本上，您必须将 tr 和 td 的高度设置为 100％。

然后，将容器设置为高度：100％和显示：flex; ，为其提供对齐 根据您的需要，空间或空间。如果您的div不是100％宽度，请不要忘记 flex-direction：列。

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

表格单元格内的垂直间距

1 个答案: