html - 在响应式布局中成对堆叠表格中的单元格

Question

很多示例展示了如何在响应式设计中将单元格一对一地堆叠(只需将 display:block 应用于所有单元格就足够了)。如果我想让电池成对堆叠怎么办？假设我有一排有 4 个单元格:

A B C D

在响应式设计中我想要这样的东西:

A B

CD

我该如何处理？

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/ .

在 http://caniuse.com/#feat=flexbox 查看浏览器对 flex 的支持.

如果您确实需要支持旧版浏览器，请尝试以下解决方案:

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/