Html 在表格单元元素中创建垂直间隙

我试图找出如何在

显示：表格单元格
元素中的两个元素之间创建垂直间隙。我的限制是该元素不能更改，必须保留在
表单元格中，但是表单元格中的html可以更改。以下是我的尝试，但不起作用：


.table{
显示：表格；
}
.行{
显示：表格行；
边框：1px纯黑；
}
.细胞{
显示：表格单元格；
宽度：50%；
}
.顶{
垂直对齐：顶部；
}
.底部{
垂直对齐：底部对齐；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。这是我的生日，我的生日，我的生日，我的生日。Phasellus porttitor pharetra eros，tincidunt rhoncus ex lacinia non。颈动脉前庭。奎斯克·阿克·夸姆·尼尔。奎斯克欧盟孕妇胡斯托。这是一个很好的例子。拍卖人rutrum augue，lobortis ligula sodales vel。整数nec ex aliquet，设施为dolor sit amet，convallis nunc。无调味品直径，位于tellus门。这是我的宿命。Donec odio ipsum，尤伊斯莫德a的ultricies，索达莱斯-帕特-努克。悬钩子花直径，马蒂斯或尼氏。一个侵权人，一个侵权人。莫比·普尔文纳·埃吉斯塔斯·埃尼姆·奎斯·康莫多。塞德在森佩尔turpis。阿利夸姆·奥迪奥·努拉，亨德雷特·阿普索姆·因特杜姆，马莱苏达·库索斯·厄洛斯。
Nam ac sem tempus、malesuada urna eu、porttitor dui。nisl mollis、maximus risus vitae、malesuada erat的Donec。前庭是自由的，前庭是自由的，前庭是自由的，前庭是自由的，前庭是自由的。塞德·达皮布斯·奥克托·卢克图斯。奎斯克和波尔塔·胡斯托。这是暂时的自由。同侧前庭、侧前庭、侧前庭。我要告诉你。埃莉芬德·福西布斯·梅特斯，坐在阿梅特·特里斯蒂克·莫里斯·比本杜姆·费吉亚旁边。前庭。pulvinar Curabitur non libero eu pharetra。但是，埃吉特·胡斯托。我们是贵族。塞德·维塔·法雷特拉·夸姆。克拉斯·维尔·康莫多·萨皮恩，一位孕妇。


这是一些应该位于顶部的文本


这是一些应该位于底部的文本

您可以通过使用绝对位置来实现这一点

添加以下css：

.cell {
  display: table-cell;
  position: relative;
  width: 50%;
}

.top, .bottom {
  position: absolute;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

看小提琴，我改变主意了。我使用的不是网格，而是flexbox，它为您需要的东西提供了更多的交叉浏览器支持

.cell:last-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

请注意，执行此操作时不能使用
display:table cell
。您可以删除“.row”div并在
.table
div上使用flex来获得相同的“2列”布局

是否允许您使用css网格？您不能以不同的方式对齐表单元格的子单元格（您使用的
垂直对齐
并不能像我猜您认为的那样）但是使用css网格，您可以将两个元素放在同一列/行对上，并使用
align self
将一个元素移动到顶部，一个元素移动到底部。@arieljuod您可以创建一个示例吗？这种方法的唯一问题是，如果屏幕变得足够小，文本将重叠。因此，它还需要在特定点进行媒体查询以消除此效果。@Bojan您还可以将
边距底部
添加到
.top
中，其高度等于
.bottom
.table {
  display: flex;
}

.cell:last-child {
  flex: 50% 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}