jquery - 具有 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