Googleのように重複divボックス

Question

どのようにGoogleのように重複するdivボックスを作るのですか？

任意の答えが高く評価されます！ もブートストラップ

Answer 1

チェックこの

https://codepen.io/rahulkapoor/pen/uAhzx 

codepen

ありがとう4はあなたが

http://v4-alpha.getbootstrap.com/components/card/#Cardcolumns 

Answer 2

あなたはグリッドにページを分割することができますしたいものを達成するのを助けるかもしれないクラスカード列を持っています、各列にdivを入力します。探している結果を得るには、floatsまたはhtml tablesを使用できます。

Answer 3

これを行うには最良の（ほとんどの下位互換性のある）方法は、水平に隣り合った一連のdivを作成することです。それらはJavaScriptで作成され、それぞれの幅が同じになるため、コンテナの幅の100％までが追加されます。たとえば：

for(i = 0; i < numColumns; i++) { 
    var column = $("<div class='column'></div>"); 
    column.css("width", (100/numColumns) + "px"); 
    $("#column-container-id-here").append(column); 
} 

クラスcolumnはdiv Sの全てが列のように動作するようにinline-blockのdisplay属性を持つように、スタイルシートで定義されなければならないであろう。次に、columnディビジョンのそれぞれの中にカードを持てます（divもあります）、それらは自動的に縦に積み重ねられます。