Html 仅在Firefox上工作的响应表

我正在开发一个需要与adobe Contrible兼容的响应性布局。为了使它兼容，我必须使用表，所以我将css应用于表，并使用媒体查询和float:left。此外，当容器并排时，我必须匹配容器的高度，但在较小的屏幕上查看这些容器并垂直堆叠后，返回到自动高度。（我正在使用纯CSS进行此操作）

如果要在Firefox上查看该网站，我完成了创建所需内容的工作： 以下是链接：

然而，Chrome只显示一个在另一个下面的容器，所以一定有我在监督的东西

任何帮助都将不胜感激

.container {
    display: table;
    width: 100%; 
    border-spacing: 10px; /*must be px*/
}
.container table {
    display: table-cell;
    background-color: #F2F2F2;
    width: 50%;
    border: 1px solid #E2E2E2;
}

@media only screen and (max-width: 480px) {
.container {
    display: block;
    border-spacing: none;
}
.container table {
    width: 96%;
    float: left;
    margin: 2%;
}
}

---

我将表格包装在一个div中，并将css应用到div中，布局现在在Chrome上运行

不知道为什么在firefox中可以这样做，但在chrome的devtools中可以快速查看，并且您的容器设置为显示：table…所以它们永远不会并排排列。我看到了你的浮动，但这只适用于容器子项，也只适用于较小的屏幕。我正在使用display:table；当容器相邻时，能够匹配高度。显示：表格在镀铬中按预期工作。请撤消vote down.BTW，如果您从移动设备开始设计布局，并在媒体查询后面放置与更广泛设备相关的样式，通常会更好。如果你做了相反的事情（就像你现在做的那样），你写的是必须撤销的风格。而且，您的标记非常糟糕@顺便说一句，如果你的评论是关于这个主题的，而不是你想谈论的任何东西，通常会更好。而且，你的领导能力相当糟糕。像你这样的分数肯定没有借口，特别是对于新用户。一点也不酷。