css - 为每行对齐列表项中的内容

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”中的第二部分内容 - 链接:http://jsfiddle.net/jstime/t7319mpw/

图片帮助解释:

Answer 1

Display: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 实现这一点