萨尔瓦多不起作用

Salvattore does not work

本文关键字：不起作用 萨尔瓦多      更新时间：2023-09-26

Try to use salvattore.（min）.js来实现列，但除非我在

元素中内联 salvattore.js 代码，否则 JavaScript 不起作用。

这是我的测试.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>

萨尔瓦多。（min）.js 正在加载和运行，只要它在挤压窗口时更改 ：：before 伪元素，但 Itemdiv 显示为块，因此呈现为垂直列表（无论我如何调整窗口大小）。

我注意到如果我将<脚本>标签替换为

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

它有效，但这显然是糟糕的形式。我正在Chrome和IE中进行测试，但两者都不起作用。有什么建议吗？

如果您仍在寻找答案...我发现我需要在关闭正文标签之前包含 salvattore.min.js:)而不是在标题中。

<script src="js/salvattore.min.js"></script>
</body>
</html>
相关文章：