javascript - 齐平 CSS 框对齐

Question

我正在使用 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>

Answer 1

您可以通过向(从)您的正文中添加(或更确切地说是删除)边距和填充来删除单元格之间的那些空间，如下所示:

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

这是左上箭头的可能解决方案，但我不太确定第二个箭头的问题是什么？