如何调整“显示：表”响应式布局以进行平板电脑缩放

Question

我一直在尝试开发符合以下条件的响应式网格布局：

• 未指定的，基于内容的高度
• 连续显示每个内容块的高度
• 将布局从一行中的四个内容块转换为两个单独的两行
的能力

环顾四周后，我找到了“解决方案”，将其设置如下：

    <div style="display: table;">
        <div style="display: table-cell;"> Some Content with 25% width </div>
        <div style="display: table-cell;"> Some Content with 25% width </div>
        <div style="display: table-cell;"> Some Content with 25% width </div>
        <div style="display: table-cell;"> Some Content with 25% width </div>
    </div>

这满足了我对高度问题的所有需求，但是我不知道什么是最好的解决方案是什么最好的解决方案是将div转换为更多的float方法，当它们每个转换为宽度为50时，它们会下降到下一行自显示器以来平板电脑的百分比：table;方法将它们全部保存在同一行中。

我有一种感觉，我需要整合一些JavaScript，因为我想不出另一种方法来获取一行中的内容以包装在下面;有谁知道这样做的有效方法？这个网站上会有相当多的内容，我担心在呈现页面之前检查每个元素需要花费太长时间。

希望这一切都有意义，因为我现在有点不在意。如果我需要澄清任何细节，请告诉我。任何和所有的帮助都很受欢迎，因为我有点难过。谢谢！