css - ブートストラップによるパッカリーのポジショニング

Question

メイン列に Packery を含む 2 列のレイアウトがあります。

これは、極小デバイス、小型デバイス、および大型デバイスで正常に機能します。中型デバイスでは、「2 列のボックス」が横に並んでいません。その下でジャンプしています。

この問題の codepen を作成しました: http://codepen.io/anon/pen/pwJsa

誰かが助けてくれることを願っています！

Answer 1

この脅威に感謝します: https://github.com/metafizzy/packery/issues/42

解決策は、calc() でボックスの幅を少し小さくすることです:

 .grid-sizer {
    width: 25%;
    width: -webkit-calc( 1/4 * 100% );
    width: calc( 1/4 * 100% );
    height: 150px;
 }

.box2 {
   ...
   width: 50%; 
   width: -webkit-calc( 2/4 * 99.5% );
   width: calc( 2/4 * 99.5% );
   float: left;
   ...

}

Codepen の例: http://codepen.io/anon/pen/tprxc