我目前正在尝试模拟text-align: justify
,但是在垂直方向和div之间。
我在div
内有4个td
,如下所示:
<td>
<div></div>
<div></div>
<div></div>
<div></div>
</td>
但是它们的总高度并不像td的高度那么高,所以它们都在中间垂直堆叠。 有没有办法在它们之间留出一些空间,就像一个合理的内容?
答案 0 :(得分:1)
好的,所以我设法实现了我想要的。 我会在这里发布可能存在相同问题的人。
基本上,您必须将 tr 和 td 的高度设置为 100%。
然后,将容器设置为高度:100%和显示:flex; ,为其提供
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;
}