Question

我之前从未问过这个问题，但我正在努力重新创建从代码笔到我的代码的相同对齐方式。我尝试了很多不同的方法来改变它

如果格式错误，请道歉。

    <!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; }

Answer 1

将砌体的初始化更改为此，

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>

需要让我的网站与代码笔版本相同

1 个答案: