我以前从未在这里问过问题，但我正在努力重新创建从代码笔到我的代码的相同对齐方式。我尝试了很多不同的方法来改变它
如果格式有误，请见谅。
<!doctype html>
<html class="html">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="V3index.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<title>Vertebrae index</title>
<script src="/path/to/masonry.pkgd.min.js"></script>
<script>
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 1
});
</script>
</head>
<body class="body" bgcolor="#650373">
<div class="grid">
<div class="grid-item grid-border--colour1"></div>
<div class="grid-item grid-border--colour2"></div>
<div class="grid-item grid-border--colour4"></div>
<div class="grid-item grid-border--colour5"></div>
<div class="grid-item grid-border--colour6 grid-item--width2 "></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
/* ---- grid ---- */
/* ---- grid-item ---- */
.grid {
position: relative;
top: 20%;
max-width: 600px;
min-width: 400px;
margin: 0 auto;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 260px;
float: left;
border: 6px solid;
}
.grid-border--colour1 { border-color: #ea45ad; margin: 4px; height: 250px;}
.grid-border--colour2 { border-color: #d5d163; margin: 4px; height: 150px;}
.grid-border--colour4 { border-color: #0abb2f; margin: 4px; height: 250px;}
.grid-border--colour5 { border-color: #d27bdc; margin: 4px; height: 150px;}
.grid-border--colour6 { border-color: #e47d32; margin: 4px; height: 200px;}
.grid-item--width2 { width: 530px; }
.grid-item--height1 { height: 644px; }
最佳答案
将 Masonry 的初始化更改为此，
var msnry = new Masonry( '.grid', {
columnWidth: 1,
itemSelector: '.grid-item'
});
您可以在此处查看工作示例:http://codepen.io/anon/pen/EPrvgO
以下 html 适用于 IE Edge 和 Chrome 48；
<html class="html">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="V3index.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<title>Vertebrae index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
</head>
<body class="body" bgcolor="#650373">
<style>
@charset "utf-8";
/* CSS Document */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
/* ---- grid ---- */
/* ---- grid-item ---- */
.grid {
position: relative;
top: 20%;
max-width: 600px;
min-width: 400px;
margin: 0 auto;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 260px;
float: left;
border: 6px solid;
}
.grid-border--colour1 { border-color: #ea45ad; margin: 4px; height: 250px;}
.grid-border--colour2 { border-color: #d5d163; margin: 4px; height: 150px;}
.grid-border--colour4 { border-color: #0abb2f; margin: 4px; height: 250px;}
.grid-border--colour5 { border-color: #d27bdc; margin: 4px; height: 150px;}
.grid-border--colour6 { border-color: #e47d32; margin: 4px; height: 200px;}
.grid-item--width2 { width: 530px; }
.grid-item--height1 { height: 644px; }
</style>
<div class="grid">
<div class="grid-item grid-border--colour1"></div>
<div class="grid-item grid-border--colour2"></div>
<div class="grid-item grid-border--colour4"></div>
<div class="grid-item grid-border--colour5"></div>
<div class="grid-item grid-border--colour6 grid-item--width2 "></div>
</div>
<script>
var msnry = new Masonry( '.grid', {
columnWidth: 1,
itemSelector: '.grid-item'
});
</script>
</body>
</html>
关于javascript - 需要让我的网站和码笔版一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35373880/