表格有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

只需在width:25%

上设置.card-container即可

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