Masonry HTML/CSS 创建的块漂浮

Question

我正在为我的网站制作图像拼贴，并且刚刚尝试使用砌体来完成它，但是当我出于某种原因改变创建的块的大小时，它们漂浮在每个块之间的大间隙。关于如何解决这个问题有什么想法吗？

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
/* ---- grid ---- */

.grid {
  border: 5px solid black;
  overflow: hidden;
  background: #EEE;
  max-width: 1346px;
  max-height: 400px;
}
/* clearfix */

.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- grid-item ---- */

.grid-item {
  width: 240px;
  height: 180px;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Masonry - Initialize in HTML</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1>Masonry - Initialize in HTML</h1>
  <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 160 }'>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://masonry.desandro.com/masonry.pkgd.js'></script>
  <script src="js/index.js"></script>
</body>

</html>

由于它可能不会显示在那里，您需要为其创建一个文件以查看发生了什么。

谢谢！

Answer 1

也许可以看看 Mason，它可以让您填补 masonry 等插件中的空白，但我从未测试过它，所以试一试并告诉我们什么有效 ;-)

Answer 2

在数据砌体中将 columnWidth 更改为 0。

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
/* ---- grid ---- */

.grid {
  border: 5px solid black;
  overflow: hidden;
  background: #EEE;
  max-width: 1346px;
  max-height: 400px;
}
/* clearfix */

.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- grid-item ---- */

.grid-item {
  width: 240px;
  height: 180px;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Masonry - Initialize in HTML</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1>Masonry - Initialize in HTML</h1>
  <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 0 }'>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://masonry.desandro.com/masonry.pkgd.js'></script>
  <script src="js/index.js"></script>
</body>

</html>

Masonry HTML/CSS 创建的块漂浮

Masonry HTML/CSS created blocks float apart

javascript

html

css

masonry