使用 jquery 对齐框中的图像

Question

https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/Game.html
上面的演示展示问题

正如您在使用它时看到的那样，图像在框中没有对齐，有时框中可能有 2 张图像。

我有 al ul class 中的所有图像，称为插槽（不知道这是否有帮助？）

是否可以让图像对齐？

我正在学习本教程：http://matthewlein.com/experiments/slots.html

如果您需要我提供更多信息或代码，您可以询问。

额外信息：

所有图片均为 145x145px

谢谢

这是存储图像的地方，然后循环显示它们

<br>
<div class="fancy">
    <ul class="slot">
        <li><img src="Knife.png"></li>
        <li><img src="SSG 08.png"></li>
        <li><img src="P2000.png"></li>
        <li><img src="UMP-45.png"></li>
        <li><img src="PP-Bizon.png"></li>
        <li><img src="P250.png"></li>
        <li><img src="P90.png"></li>
        <li><img src="Nova.png"></li>
        <li><img src="Negev.png"></li>
        <li><img src="Mp7.png"></li>
        <li><img src="PP-Bizon.png"></li>
        <li><img src="P250.png"></li>
        <li><img src="P90.png"></li>
        <li><img src="M4A1-S.png"></li>
        <li><img src="Gock-18.png"></li>
        <li><img src="Five-SeveN.png"></li>
        <li><img src="Desert Eagle.png"></li>
        <li><img src="CZ75-Auto.png"></li>

然后继续添加更多图像

Answer 1

你有一个错误。我在代码中标注了：

onStart : function() {
    $('.slot').removeClass('winner');
    audio.play();  // <-- ReferenceError: audio is not defined
    Money = Money + 2.50
    document.getElementById('Money').innerHTML = Money;
},

如果您注释掉该行，它将起作用。

顺便说一句，最好在浏览器中查看 javascript 控制台并查看错误消息。

编辑：此外，您的某些图片可能不是 145x145，因为如果您使用 css 强制它，所有内容都会卡入到位。

.fancy .slot li img {
    width: 145px;
    height: 145px;
}

编辑2：您还有一个 Mixed Content 错误，因为您的页面 url 是 https，但您请求 jquery 而不是 http。将您的 jquery 脚本标签 src 更改为 https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js.

使用 jquery 对齐框中的图像

Align images in a box using jquery

javascript

jquery

jquery-plugins