html - 将元素定位在表行元素上

Question

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

当 .message 显示为 block 时很容易做到，但我似乎无法使用 table-row。正如您在我的 fiddle 中看到的那样，所有三 Angular 形都位于相同的错误位置，并且第二个单元格没有扩展到整行(如果我删除 .opener 元素，它就会扩展)。

我错过了什么？

Fiddle for the tests (and clarity)

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

需要兼容:Firefox 和 Chrome

Answer 1

你可以用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;
}