Question

我在网站上工作，但我遇到了一个小问题，我的桌子上有一个可变数量的正方形，所有这些正方形都与其他正方形相同。目前我在5列的表格中显示这些正方形，但是，在移动设备上，我宁愿有2列，因为这些正方形的大小对于720像素宽的内容来说很小移动屏幕，导致内容超出广场。

我想要的是基于屏幕大小的可变数量的列。我怎么能这样做？

Answer 1

如果这些块的大小完全相同，那么将它们转换为inline-block而不是表格单元格是没有问题的。
内联块是一种块，其行为类似于纯文本中的单词，因此当窗口调整大小时，它们可以很好地流动，就像您希望的那样。

你所需要的只是

div {
    display:inline-block;
}

请参阅Fiddle。

Answer 2

对于下面的示例表，您可以使用给定的CSS隐藏第3和第4列，具体取决于屏幕大小。

HTML

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS

@media screen and (max-width: 300px) {
    table td:nth-of-type(3) {
        display: none;
    }
}
@media screen and (max-width: 600px) {
    table td:nth-of-type(4) {
        display: none;
    }
}

Answer 3

如果其余的方块仍然可见并且只是滑入新的行，那么我担心你不能避免使用JavaScript，因为DOM必须被改变..

如果不需要表格，我会建议在广场上使用花车（如李斯特先生）

表格中可变数量的列基于屏幕宽度

3 个答案: