包含4列(所有屏幕宽度)和2行应用翻转效果的jquery的表格

Question

我正在研究一种使用jquery来翻牌的效果，目前我有：

​

​

但我想创建一个4列2行的矩阵，如下所示：

​

​

这里的问题是，我不知道如何让这个矩阵占据屏幕的所有宽度(任何屏幕上的任何类型的宽度)，所以我在表格布局中制作了width = 100%：

#wrapper {
    display: table;
    table-layout: fixed;    
    width:100%;
}
#wrapper div {
    display: table-cell;
}

占据所有宽度。

但是，我如何才能确保图像像所需的图像一样占据所有宽度呢？我也不知道怎么排第二排……？

你能帮我得到想要的输出吗？这是我目前所掌握的 in this fiddle，

Answer 1

只需在.card-container上设置width:25%即可

See on JSFiddle

以下是我所做的更改：

section.card-container{
    float: left;
    margin:0;
    width:25%;
}

/*#wrapper {
    display: table;
    table-layout: fixed;    
    width:100%;
}
#wrapper div {
    display: table-cell;
}*/

添加另一行与复制元素一样简单

See on JSFiddle