gpt4 book ai didi

javascript - Masonry HTML/CSS 创建的 block float 分开

转载 作者:太空宇宙 更新时间:2023-11-04 10:41:14 24 4
gpt4 key购买 nike

我正在为我的网站制作图像拼贴,并且刚刚尝试使用 masonry 来完成它,但是当我出于某种原因改变创建的 block 的大小时,它们漂浮在每个 block 之间的大间隙。关于如何解决此问题的任何想法?

* {
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>

因为它可能不会显示在那里,您需要为其创建一个文件以查看发生了什么。 Image of gaps

谢谢!

最佳答案

在数据 masonry 中将 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>

关于javascript - Masonry HTML/CSS 创建的 block float 分开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35790375/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com