尝试使用salvattore。(min).js来实现列，但是除非我在内联元素中插入salvattore.js代码，否则JavaScript无法正常工作。
这是我的test.html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#grid[data-columns]::before {
content: '3 .column.size-1of3';
}
/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
@media screen and (max-width: 480px){
#grid[data-columns]::before {
content: '1 .column.size-1of1';
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
#grid[data-columns]::before {
content: '2 .column.size-1of2';
}
}
@media screen and (min-width: 769px) {
#grid[data-columns]::before {
content: '2 .column.size-1of2';
}
}
/* Again, youre free to use and define the classes: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
</style>
<script src='/salvattore.min.js' type='text/javascript'></script>
</head>
<body>
<div id="grid" data-columns>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
<div>Item #4</div>
<div>Item #5</div>
<div>Item #6</div>
<div>Item #7</div>
<div>Item #8</div>
<div>Item #9</div>
<div>Item #10</div>
<div>Item #11</div>
<div>Item #12</div>
<div>Item #13</div>
<div>Item #14</div>
</div>
</body>
</html>
salvattore。(min).js正在加载并运行，因为它在挤压窗口时更改了:: before伪元素，但是Item div显示为块，因此呈现为垂直列表(无论如何我调整窗口大小)。
我注意到如果将标记替换为
<script type="text/javascript">
... cut and paste salvatorre.js (not the min.js) here ...
</script>
它有效，但这显然是不好的形式。我正在Chrome和IE中进行测试，但均无法正常工作。有什么建议吗？
最佳答案
如果您仍在寻找答案...我发现我需要在关闭body标签之前包括salvattore.min.js :)，而不是在标题中。
<script src="js/salvattore.min.js"></script>
</body>
</html>
关于javascript - Salvattore不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27120109/