Html 在“显示：表格”中对齐底部嵌套项

让我们假设我得到了一行，其中CSS inside style标记中有3个项目，用于简化

<div style="display:table">
    <div style="display:table-cell">
        <span>Some text</span>
        <button type="button">Some button</button>
    </div>
    <div style="display:table-cell">
        <span>Some Other text</span>
        <button type="button">Some button</button>
    </div>
    <div style="display:table-cell">
        <span>Long Long Long Long Long Long Long text </span>
        <button type="button">Some button</button>
    </div>
</div>

我如何才能改变这个问题，即无论文本长度如何，所有三个按钮都将在同一行中？

---

现在文本不相等，然后按钮不在同一行。

忽略不存在的样式

您需要添加一行来分隔内容

---

如果不想更改html代码，则只能使用css样式。 我在表格单元格中添加了.cell类

.cell {
    position: relative;
    padding-bottom: 30px;
}

.cell button {
    position: absolute;
    bottom: 0;
    left: 0;
}

---

您是否考虑过将“文本”部分和“…”部分分成不同的行？谢谢。我曾试图避免这种解决方案，但效果很好。

.cell {
    position: relative;
    padding-bottom: 30px;
}

.cell button {
    position: absolute;
    bottom: 0;
    left: 0;
}