Question

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

的单元格内

当.message显示为block时很容易，但似乎无法使用table-row执行此操作。正如您在我的小提琴中看到的那样，所有三角形都处于相同的错误位置，第二个单元格不会延伸到整行（如果我删除了.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;
}

Answer 2

问题是table-cell，table-row和类似的表格显示值无法应用任何定位。就像您正在创建一个表格并为td和tr提供职位。

一个丑陋的修复方法是将其div包裹在display设置为block this

的{{1}}中

参考：position - CSS | MDN

将元素放在表行元素上

2 个答案:

CSS