将元素放置在表格行元素上

Question

我有一个.message 列表，其显示为table-row。其中一些消息应该在底部中心有一个红色三角形。包含三角形的元素不能位于.message 的单元格内。

当.message 显示为block 时，这很容易做到，但我似乎无法用table-row 做到这一点。正如您在我的小提琴中看到的那样，所有三角形都位于相同的错误位置，并且第二个单元格没有延伸到整行（如果我删除了.opener 元素，它会延伸）。

我错过了什么？

Fiddle for the tests (and clarity)

将鼠标悬停在左侧单元格上，了解我为什么想要table-cell 元素。更准确地说，我需要表格单元格元素的所有定位和尺寸优势（例如，两个单元格的高度相同，并且正确的单元格必须填充行的剩余空间）。

需要兼容：Firefox 和 Chrome

Answer 1

问题是table-cell、table-row 和类似的表格显示值不能应用任何定位。就像您正在创建一个表格并为td 和tr 分配位置一样。

一个丑陋的解决方法是将其包装在div 中，其display 设置为block，如this

参考：position - CSS | MDN

Answer 2

你可以用 flexbox 得到这个布局

FIDDLE

CSS

#b {
    width:100%;
    list-style: none;
}
.m {
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    background: #789;
    border-top: thin solid #ccc;
}
.u {
    width: 100px;
    float:left;
    opacity:.999;
}
.u:before
{
    content: '';
    width: 100px;
    height: 100%;
    display: block;
    position: absolute;
    top:0;
    z-index:-1;
}
.c {
    overflow: hidden;
    width: calc(100% - 100px);
}

.u:hover:before, .c:hover {
    background: yellow;
}
.opener {
    width: 16px;
    text-align: center;
    cursor: pointer;
    color: red;

    left:0;right:0;
    bottom:0;
    margin: auto;
    z-index: 0;
    position: absolute;
}
.opener:before {
    content:'▼';
    display: block;
}