砖石留下了很多空间

Question

我正在尝试使用砌体，但似乎效果不佳。 它留下了很多空的空间。 正如你在这里看到的，我已经尝试了各种其他方法来实现Masonry，但是这个方法最大程度地倾向于结果。 有人可以帮助这个菜鸟吗？

这里我认为我的HTML / CSS / JAVASCRIPT非常重要

 <script src="masonry-docs/js/masonry.pkgd.min.js"></script> <script type="text/javascript">// Javascript var container = document.querySelector('#masonry-grid'); var msnry = new Masonry( container, { // options columnWidth: 33%, itemSelector: '.grid-item' });</script> 

 .grid-item{width: 33%;} .grid-item--width2{width: 33%;} .grid-item--width3{width: 33%;} *{box-sizing:border-box;} .box-sizing:border-box; .grid:after { content: ''; display: block; clear: both; } .grid-item { width: 33%; float: left; border: 5px solid #FFFFFF; } .grid-sizer, .grid-item { width: 33%; } 

 <section id="werk"> <div class="container"> <div class="grid"> <div class="item"> <div id="masonry-grid"> <div class="grid-item"> <h3>Manifesta 10</h3> <span class="category">huisstijl</span> <img src="images/manifesta.jpg" alt="" /> </div> <div class="item"> <div class="grid-item grid-item--width2"> <h3>Deutsche Grammophon</h3> <span class="category">platenhoezen</span> <img src="images/GIF_1.gif" alt="" /> </div> </div> <div class="item"> <div class="grid-item grid-item--width3"> <h3>Ghent Art Book Fair</h3> <span class="category">poster</span> <img src="images/boekposter.png" alt="" /> </div> </div> <div class="item"> <div class="grid-item"> <h3>teaser masterproef</h3> <span class="category">foto</span> <img src="images/masterproef.png" alt="" /> </div> </div> <div class="item"> <div class="grid-item grid-item--width2"> <h3>Mundaneum</h3> <span class="category">publicatie</span> <img src="images/Mundaneum.gif" alt="" /> </div> </div> </div> </div> </div> </div> 

Answer 1

你的h3元素有一个边距，加上你的CSS代码的开头：

h3 { margin: 0px; }

您的.grid-item的边框为5px，请在CSS代码中进行更改：

.grid-item {
  width: 33%;
  float: left;
  border: 0px solid #FFFFFF;
}