0

Masonry で CSS を練習しています。私は少し基本的なテストを行っており、すべてがどのように表示されるかを確認しています。ただし、この問題を解決する方法がわかりません。CSSのクラス内にすべての写真を収めたいのですが、.masonryこの小さなスペースが発生し、それを修正する方法がわかりません。すべてのボックスを平らにし、各ボックスの間に空白を表示しないようにします。

コードペンは次のとおりです。

http://codepen.io/anon/pen/Cpedg

ここに画像の説明を入力

私のCSS：

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

body { font-family: sans-serif; }

.masonry{
  margin: 0 auto;
  background: #EEE;
  max-width: 80%;
}

.masonry .item,
.masonry .grid-sizer {
  width:  20%;      /*item default width of 20%*/
  margin: 0px;
}

.masonry .item,
.masonry .grid-sizer {
  height: 60px;    /* default hieght of image*/
  float:  left;

  background: #D26;
  border: 1px solid #343;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

.item.w2 { width:  40%; }           /* changes each item to these chracteristics*/

.item.h2 { height: 100px; }
.item.h3 { height: 130px; }
.item.h4 { height: 180px; }

私のHTML：

<h1>Masonry - columnWidth</h1>
<div class="masonry js-masonry"  data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item" }'>
  <div class="grid-sizer"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item w3"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h3"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>
4

2 に答える 2

1

次のように、ボディに (から) マージンとパディングを追加 (または削除) することで、セル間のこれらのスペースを削除できます。

body {
    font-family: sans-serif; 
    margin: 0;
    padding: 0;
}

それが左上の矢印の可能な解決策ですが、2 番目の矢印の問題が何かよくわかりません。

于 2013-10-25T22:59:41.217 に答える
-1

そのため、Google chrome のズーム機能が少しおかしくなることがあります。すべてを再調整するための簡単な修正は、すべてを再調整するために押すctrl + 0ことです!

于 2013-10-25T23:58:57.443 に答える