javascript - Is it possible to determine whether you are in the last row of a css-defined column? -

javascript - Is it possible to determine whether you are in the last row of a css-defined column? -

i using new css-style column break single ul multiple columns. wish select lastly element in each column javascript or css.

html:

<ul> <li /> <li /> <li><h4 /></li> ... </ul>

css:

ul{ column-count: 6; }

sometimes line-items h4:s in them end lastly item of row, beingness orphans. solve this, , have been looking @ 2 alternatives.

using css orphan property, due markup don't think work @ , not unsupported in firefox , safari, back upwards not must nice.

adding top-margin/padding h4 @ end of column, don't know how select them, either css or javascript/jquery. prefer keeping markup, is, if it's not possible, can alter it.

columns in css aren't content aware. 2 properties related columns can help in way column-fill (which works in firefox) , break-inside.

column-fill distribute contents through columns based on height of container.

page-break columns clear floats, stopping elements getting stuck between columns. has different syntaxes across browsers.

-webkit-column-break-inside: avoid; /* chrome, safari, opera */ page-break-inside: avoid; /* firefox */ break-inside: avoid; /* ie 10+ */

but anyway, columns more helpful when have container text , want split in columns without markup. since using li , don't have text within div, suggest utilize floats accomplish multi column layout looking for.

javascript jquery css