table 单元格内的垂直间距

Question

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

我有 4 个 div 在一个 td 里面，像这样 :

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

但是它们的总高度没有td的高度高，所以都是竖着放在中间。有没有办法在它们之间放一些space，比如合理的内容？

Answer 1

好的，所以我设法实现了我要找的东西。我会 post 在这里为那些可能有同样问题的人提供。

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

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

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

table 单元格内的垂直间距

Vertical spacing inside a table-cell

css

html-table

flexbox

justify