僅適用於Firefox的響應式表格

我正在研究需要與Adobe捐助兼容的響應式佈局。爲了使它兼容，我必須使用表格，所以我將CSS應用於表格並使用媒體查詢並浮動：left。而且，當它們並排放置時，我必須匹配容器的高度，但是一旦這些容器在較小的屏幕上觀看並垂直堆疊，就回到自動高度。（我用純CSS這樣做）僅適用於Firefox的響應式表格

我完成創建正是我需要的，如果該網站要在Firefox瀏覽：這裏是鏈接：http://as.sjsu.edu/ascdc/responsive_home.htm

然而，鉻只顯示容器一個在另一個之下，所以必須有我正在監督的東西。

任何幫助將不勝感激！

.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%; 
} 
}

來源

2013-05-03 irm

不知道爲什麼這可以在Firefox中工作，但快速查看鉻中的devtools，並且您的容器被設置爲顯示：table ...因此它們永遠不會排成一排。我看到你的浮球，但那隻適用於容器的孩子，以及只適用於較小的屏幕 – albert 2013-05-03 21:05:53

我使用display：table;當容器彼此相鄰時能夠匹配高度。 – irm 2013-05-03 21:09:04

顯示：表格在Chrome中按預期工作。 http://as.sjsu.edu/ascdc/responsive_home.htm請撤消投票。 – irm 2013-05-03 21:50:51

我把表格封裝在一個div中，並將CSS應用到divs，而佈局現在在Chrome上工作。

來源

2013-05-03 21:49:14 irm

僅適用於Firefox的響應式表格

回答

相關問題