Geek asks and answers

Place an item above a row table item

I have a list .messagewhose display table-row. Some of these posts should have a red triangle above them, in the lower center. An element containing a triangle cannot be inside a cell .message.

It is easy to do when the display .message block, but I can not do it with table-row. As you can see in my violin, all the triangles are in the same wrong position, and the second cell does not extend to the entire line (this happens if I delete an element .opener).

What am I missing?

Script for tests (and clarity)

Hover the left cell with the mouse to get why I want to have elements table-cell. To be more precise, I need the whole range of positioning and dimensional advantages of table-table elements (for example, the same height for both cells, and the right cell should fill the remaining row space).

Compatibility Required: Firefox and Chrome

+3
source share
2 answers

You can get this layout with 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;
}
+2
source

The problem is that table-cell, table-rowand similar table display values ​​cannot have any positioning. As if you are creating a table and setting the positions tdand tr.

, div, display block, this

: - CSS | MDN

+1

More articles:


All Articles