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

请参阅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/

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

1 个答案: