0

私はjqueryを使用してカードを反転させる効果に取り組んでいます.現在、私は持っています:

ここに画像の説明を入力

しかし、次のような 4 列と 2 行の行列を作成したいと思います。

ここに画像の説明を入力

ここでの問題は、このマトリックスを画面のすべての幅 (任意の画面の任意のタイプの幅) を占有させる方法がわからないためwidth = 100%、テーブルレイアウトで作成したことです。

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

全幅を占める。

しかし、画像が必要な画像のようにすべての幅を占めていることをどのように保証できますか? また、2列目の作り方がわからない…？

希望の出力を得るのを手伝ってもらえますか? これが私がこれまでに持っていたものですこのフィドル、

4

1 に答える 1

1

にセットwidth:25%するだけ.card-container

JSFiddleで見る

ここに私が行った変更があります：

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

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

別の行を追加することは、要素を複製するのと同じくらい簡単です

JSFiddleで見る

于 2013-03-03T04:44:09.400 に答える