Question

我正在制作一个需要与adobe贡献兼容的响应式布局。为了使它兼容，我必须使用表，所以我将css应用于表并使用媒体查询和float：left。此外，我必须在它们并排时匹配容器的高度，但是一旦这些容器在较小的屏幕上观察并垂直堆叠，则返回到自动高度。（我用纯CSS做这个）

如果要在Firefox上查看网站，我完成了创建我需要的内容：这是链接：http://as.sjsu.edu/ascdc/responsive_home.htm

但是，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%;
}
}

Answer 1

我将表格包装在div中，然后将css应用于div，而布局现在正在Chrome上运行。

响应表仅适用于Firefox

1 个答案: