HTML

Question

我正在尝试使用 flexbox 在 table 中将我的元素 (.table-footer) 底部对齐。我希望 table-footer 像这样贴在 .table-row 的底部：

我试过：

.table-footer {
  background-color: grey;
  bottom: 0;
}

.table-row {
    display: flex;
    flex-direction: column;
}

但我得到的是：

我尝试使用绝对位置和底部 0，但效果不佳...您能告诉我问题出在哪里吗？谢谢:)

您可以在此处尝试代码：https://jsfiddle.net/a5dubgfj/

Answer 1

你可以这样做

.table-footer {
  background-color: grey;
  bottom: 0;
}

.table-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 108px; //the height of the table row you have so far
}

可能有更好的定义高度的方法，但这对我有用

这是 jsfiddle link：https://jsfiddle.net/8ubm96tk/

HTML - 使用 flexbox 在 table 行中定位页脚元素

HTML - Position footer element in a table row with flexbox

css

position

html-table

flexbox