对齐每行的列表项中的内容

Question

我正在努力实现以下目标：

1. max 2 cols, x rows
2. list item will wrap - if hide current item then next item will take its place
3. buttons must be aligned in both columns
4. there can be whitespace between the content and the button
5. no CSS3

目前一切看起来都不错，除了BBBBBBBBBB＆＃39; BBBBBBBBBB中的第二位内容。 - 链接：http://jsfiddle.net/jstime/t7319mpw/

图片有助于解释：

Answer 1

显示：flex over used可能对仅css测试有帮助：http://jsfiddle.net/t7319mpw/9/

#listofthings {
    background-color:gray;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
#listofthings li {
    width: 300px;
   /* fall back for older browser */
   display:inline-block;vertical-align:top;/* middle or top or else */
   display:flex;
}

#listofthings li >div {
   display:flex;
    flex-direction:column;
    align-self:stretch;
}
div.text-center > div {
    flex:1
}

您的第一条评论似乎是通过js

实现这一目标的良好提示

Answer 2

如果您只想依赖CSS，可以设置vertical-align:top;，然后为文本容器指定最小和最大高度。 为了对齐显示：inline-block;你也可以申请

body{ text-align:center; }

然后是CSS规则的其余部分：

#listofthings {
    background-color:gray;
}

#listofthings li {
    width: 300px;
    display: inline-block;
    vertical-align:top;
}

.text-center div{
    min-height:160px;
    max-height:160px;
    overflow:hidden;
}

DEMO http://jsfiddle.net/t7319mpw/10/