砖石结构留下了很多空间

masonry leaves a lot of spaces

本文关键字：空间 石结构 结构      更新时间：2023-09-26

我正在尝试使用Masonry，但它似乎不太好用。它留下了很多空位。正如你在这里看到的我已经尝试了各种其他方法来实现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>

您的h3元素有一个边距，请将其添加到CSS代码的开头：

h3 { margin: 0px; }

您的.grid项目有一个5px的边框，请在您的CSS代码中更改它：

.grid-item {
  width: 33%;
  float: left;
  border: 0px solid #FFFFFF;
}
相关文章：