1

次の CodePen を作成しました: http://codepen.io/anon/pen/wmjHy

ボックスの 2 列の組積造を作成し、それらの間に 20px の間隔を空けるというアイデアです。各アイテムの境界線と内側のパディングを無視するbox-sizingように設定しました。border-box

ただし、2 番目の列は最初の列の下で折りたたまれています...おそらく、50%両方のボックス (左と右) の と 20px が追加されているためです。

これを修正する方法についてのアイデアはありますか?

私はおそらくやっているのを見てきました：

'columnWidth': $('.masonry').width() / 2CSSに.item設定が100%ありますが、それもうまくいかないようです...おそらくガターが右側の列ボックスにも追加されているためですか？

JS:

$(document).ready(function(){

  $('.masonry').masonry({
    'itemSelector': '.item',
    'gutter': 20
    });

});

CSS:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { 

  margin: 0;
  font-family: sans-serif;
  padding: 20px;
}

.masonry {
  background: #ff0000;
}

.masonry .item {
  width:  50%;
  height: 100px;
  float: left;
  background: #eeeeee;
  border: 1px solid #333;
  margin-bottom: 20px;
}

HTML:

<div class="masonry">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
4

2 に答える 2

2

ガターが 30px の 2 列の石積みのソリューションを作成しました。両方の列に追加されますがoverflow:hidden、グリッド要素に a を追加すると、不要な右ガターを隠すことができます。

コードペンはこちら: http://codepen.io/natbatwat/pen/VLJjmy

于 2015-08-20T03:21:26.477 に答える