Question

尝试使用salvattore。（min）.js来实现列但javascript不起作用，除非我在＆lt; head＆gt;中内联salvattore.js代码。元件。

这是我的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显示为块，因此呈现为垂直列表（无论我如何调整窗口大小。）

我注意到如果我替换＆lt; script＆gt;用

标记

<script type="text/javascript">
  ... cut and paste salvatorre.js (not the min.js) here ...
</script>

它有效，但这显然是不好的形式。我正在使用Chrome和IE进行测试，但都无法正常工作。有什么建议吗？

Answer 1

如果你还在寻找答案......我发现在关闭body标签之前我需要包括salvattore.min.js而不是在标题中。

<script src="js/salvattore.min.js"></script>

</body>
</html>

Salvattore不起作用

1 个答案: