Css 如何将聊天窗口的文字信息与底部对齐？

我正在建立一个聊天窗口-高度100%的工作非常完美，但我不能使消息显示在底部

HTML:

你好 世界 邮寄 CSS:

d-flex{ 身高：100%； } .卡片{ 身高：100%； } .卡体{ 溢出y：自动； } .徽章{ 字体大小：400； } 截图：

---

通过将.card body转换为带有display:flex的flex元素，然后在.text left和.text right上设置margin top:auto，可以将文本与底部对齐

不幸的是，这会将右侧文本移到左侧，并将其放在同一行上。这可以通过添加justify content来解决：在到.card body之间添加空格，在到.text left之间添加大约20px的页边距底部

这可以从以下几点看出：

d-flex{ 高度：100vh；/*仅因堆栈而更改*/ } .卡片{ 身高：100%； } .卡体{ 溢出y：自动； } .徽章{ 字体大小：400； } /*新的*/ .卡体{ 显示器：flex； 证明内容：之间的空间； } .text left、.text right{ 页边顶部：自动； } .左文本{ 边缘底部：20px； } 你好 世界 邮寄

---

谢谢你的帮助！只有一个问题，当我添加更多的消息时，它们出现在同一行上，而不是新的行上。。。