Html 在CSS中如何使两个单元格在高度上相互独立？

我想列出我公司的服务项目。我想象了16:9显示器上的两个细胞的样子

我想用HTML格式的表执行此操作：

服务
服务
文本文本文本
文本
服务
服务
文本文本文本文本
文本

您可以从以下内容开始：

嬉戏

.MainDiv{
高度：800px；
宽度：100%；
边框：1px纯红；
显示器：flex；
填充：10px；
}
.leftDiv{
高度：800px；
宽度：50%；
边框：1px纯蓝色；
利润率：10px；
}
.rightDiv{
高度：800px；
宽度：50%；
边框：1px纯蓝色；
利润率：10px；
}

服务名称
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
服务名称
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
左左
服务名称
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
服务名称
右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
对对对对
服务名称
右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
服务名称
右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

您是否需要使用

div

？如果是这样，请使用

flex

或

grid

，这是最适合此用例的。您是否实际使用表格来处理表格数据？您的“想象”显示了一个布局，但您的示例显示了表格数据。前者不能很好地使用

表

元素，但后者是。@Hereticsmonkey我把它当作一个“把戏”。还有什么更好的方法吗？@Manjuboyz我没有要求。如果你愿意，你可以写一个解释flex和grid的答案。那太好了！关于堆栈溢出，有许多问题和答案是关于如何在没有表的情况下使用CSS创建两列布局。