在响应布局中按成对堆叠单元格

Question

很多示例都展示了如何在响应式设计中一对一地堆叠单元格（将display：block应用于所有单元格就足够了）。如果我想让细胞成对堆叠，会怎么样？比方说，我有4个细胞中的一行：

A B C d

而且在响应的设计，我想是这样的：

A B

C^d

我怎么能处理这个？

Answer 1

如果您不必支持旧浏览器（如IE9），请使用flex-basis。

HTML

<table> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    <td>C</td> 
    <td>D</td> 
    </tr> 
</table> 

CSS

tr { 
    display: flex; 
    flex-wrap:wrap; 
} 

td { 
    /* makes every cell at least 34% of the total width, thus 
    preventing more than two cells from getting on the same row */ 
    flex-basis: 34%; 
} 

这里是一个的jsfiddle https://jsfiddle.net/0thg1j7h/。

请参阅浏览器对flex的支持，网址为http://caniuse.com/#feat=flexbox。

如果你确实需要支持旧的浏览器，尝试此解决方案：

HTML

<table> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    </tr> 
    <tr> 
    <td>C</td> 
    <td>D</td> 
    </tr> 
</table> 

CSS

/* all cells on one line */ 
/*tr { 
    float: left; 
}*/ 

/* two cells per row */ 
/* do nothing */ 

/* one cell per row */ 
/*td { 
    display: block; 
}*/ 

这里是的jsfiddle https://jsfiddle.net/3183v90w/1/