需要让我的网站与代码笔版本相同
Need to get my site to be the same as the code pen version
我以前从未在这里问过问题,但我正在努力重新创建从代码笔到我的代码的相同对齐方式。 我已经尝试了许多不同的方法来改变它
如果格式错误,请道歉。
代码笔版本我的版本
<!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; }
将砌体的初始化更改为此,
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>
相关文章:
- JShint 在不同的机器上的行为不同,尽管代码、版本和配置相同
- 安卓版本的代码不像桌面互联网浏览器那样工作
- 隐藏/显示 js 代码不会在 IE8 或更低版本上运行
- 如何为略有不同的不同版本的web应用程序构建代码
- 从生产版本的javascript代码中删除断言
- Chrome坚持保留陈旧的javascript代码,并赢得了't重新加载最新版本
- 我使用谷歌标签管理器在我的网站上启动标签.变量“;未定义的“;在任何版本的Internet Explorer的自定义代码
- Kineticjs:drag.moving 事件在最新版本上不起作用.如何升级代码
- Meteor 1.2.1 版本 服务器代码中的 Meteor.method({}) 不起作用
- 需要让我的网站与代码笔版本相同
- 这个jQuery代码在所有版本中是否一致
- 将 jQuery 库升级到版本 1.10 后,代码停止工作
- <?=标签在代码点火器2.1.0版本中不起作用
- ANTLR无法生成4.5版本的Javascript代码
- 代码适用于jquery 1.8.3,但不适用于1.9.1及更高版本
- 我的代码将在哪个jQuery版本上运行
- 哪个版本的Eclipse显示CSS代码提示
- 为什么我的代码在本地主机上的Internet explorer版本8上工作,而不是在服务器上,而不是在Internet
- Meteor.js安卓版本代码
- 如何使用Django、Angular2和Webpack版本代码