gpt4 book ai didi

javascript - 使用数据同位素添加装订线值并设置 div 的高度

转载 作者:行者123 更新时间:2023-11-28 05:21:57 36 4
gpt4 key购买 nike

同位素 CSS 似乎没有 CDN,所以我将代码粘贴到这里:

<!doctype html>
<html class="export">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Isotope &#xB7; packery</title>

<!-- Isotope does not require any CSS files -->
<link rel="stylesheet" href="../css/isotope-docs.css" media="screen">

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- custom -->
<style type="text/css">
.grid {
border: none;
background: none;
}
.square, .rec-tall {
width: 50%;
}
.rec-wide {
width: 100%;
}
.square-small {
width: 25%;
}
</style>
</head>

<body class="page--packery" data-page="packery">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="grid" data-isotope='{ "layoutMode": "packery", "gutter": "0" }'>
<div class="grid-splash-item square">1</div>
<div class="grid-splash-item rec-tall">2</div>
<div class="grid-splash-item square">3</div>
<div class="grid-splash-item rec-wide">4</div>
<div class="grid-splash-item square-small">5</div>
<div class="grid-splash-item">6</div>
<div class="grid-splash-item">7</div>
<div class="grid-splash-item">8</div>
<div class="grid-splash-item">9</div>
<div class="grid-splash-item">10</div>
<div class="grid-splash-item">11</div>
<div class="grid-splash-item">12</div>
</div>
</div>
</div>
</div>

<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="../js/isotope-docs.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

我试图将装订线减少到 0,所以 div 之间没有间距,所以有问题的行是:

div class="grid" data-isotope='{ "layoutMode": "packery", "gutter": "0" }'>

但这似乎不起作用?

我还想改变 div 的高度,使两个大小的正方形实际上都是正方形,rec-tall 是 1:2,rec-wide 是 2:1。

最佳答案

解决了,伙计们:

<div class="grid" data-isotope='{ "layoutMode": "packery", "packery": { "gutter": -10 } }'>

引号太多了!

关于javascript - 使用数据同位素添加装订线值并设置 div 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38980410/

36 4 0
文章推荐: jquery - 正/负最大值输入
文章推荐: javascript - 如何从输入框中获取值
文章推荐: javascript - 如何使用通用 JavaScript 函数从 HTML 获取 CSS 属性值