div容器文字过多导致高度不对齐处理方法

如图所示，文字过长会导致span不对齐，使用vertical-align: top;顶部对齐，但高度依旧不同。

<style>
div span{
    border: 1px solid #ececec;                      
    color: #4e4e4e;
    padding: 8px;
    display: inline-block;
    text-overflow: ellipsis;
}    
</style>
<div>
    <span>回访人</span>
    <span>回访时间</span>
    <span>回访小结</span>
</div>;
<div>
    <span>测试1</span>
    <span>测试2</span>
    <span>测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3</span>
</div>

这时div添加 display: flex;可以解决高度不对齐的问题，inline-block是每个元素占一小行，flex是包裹在一起的元素占一行。

标签：容器,span,回访,flex,测试,对齐,div
来源： https://blog.csdn.net/weixin_53545232/article/details/117851228