Question

您可以在此处查看该网站：Memory Game （不确定为什么卡片间隔开来......希望它们靠得很近）

我正在尝试创建一个简单的网站，为存储卡游戏创建一个图像表。图像加载正确，Java脚本似乎工作，但我似乎无法使边框动态调整大小与表的大小。无论我做什么，边框宽度都会在整个屏幕上扩展，无论构成桌面的图像是否比边框所包含的区域小得多。（具有讽刺意味的是，高度似乎动态地改变了，但不是宽度。）非常感谢提前！

这是HTML

<html>
<head>
<meta charset="UTF-8">

    <link href="mystyles.css" rel="stylesheet" type="text/css">
    <script src = "tableGen.js"></script> 
</head>
<body onload = "startTable('easy')">

        <div id="masthead">
            <img src="Images/GreyKnight.jpg" width = "450" height="200" alt="40k Table Top">
            <img src="Images/WarhammerLogo.png" width = "450" height="200" alt="Warhammer40K Logo">
            <img src="Images/SpaceMarine.jpg" width = "450" height="200" alt="Space Marine">
            <h1>
                Warhammer 40K Memory Card Game 
            </h1>
        </div>
        <br>

    <div id = "tableDiv">
            This text should be removed by the javascript. 
    </div>


    <form name = "input" >
    <input type="radio" name="difficulty" value="easy" checked = "checked" onClick ="startTable('easy')">Easy<br>
    <input type="radio" name="difficulty" value="medium" onClick ="startTable('medium')">Medium<br>
    <input type="radio" name="difficulty" value="hard" onClick ="startTable('hard')">Hard<br>   
    </form>

    </body> 


    </html>

here is the Java Script 

    function startTable(setting) {
    "use strict";

    var tableDiv = document.getElementById("tableDiv"); 
    var checkSetting = setting; 
    var newVar; 
    tableDiv.innerHTML = genTable(setting); 
    }

    function genTable(setting)
    {
"use strict"; 
var html = ""; 
var i = 0; 

if(setting == "easy")
    i = 4; 
else if(setting == "medium")
    i = 6; 
else if(setting == "hard") 
    i = 8; 

html += "<table> "; 
for (var col = i; col > 0; col--)
{
html += "<tr>"; 
for (var row = i; row > 0; row--)
{
 html += "<td><img src=\"Images/Cards/Card_Back.jpg\" width = \"80\" height=\"121\" alt=\"Card       Back\"></td>"
}
}
html += "</table>";

return html;

这是CSS

 body {
margin: 5px;
background-color: black;
color: white;  
font-family: Comic Sans MS, cursive, sans-serif; 
text-align: left;

}

h1 { text-align: center; 
font-family:Georgia, serif;
color: red;
}

h2 { text-align: left; 
font-size: 22px; 
color: red;
font-family:Verdana, Geneva, sans-serif;

}


table
{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table tr td {
    padding: 5px; 
}

table tr td img {
    max-width: 100%;
}
img {
outline: 4px solid #eee;
}

a:link {
    color: #22F01B;
}

a:visited {
    color: yellow;
}


#masthead {
    text-align:center; 
    padding-top: 10px; 
    border-bottom-style:dashed; 
    border-bottom-width:medium;
    border-bottom-color:#000080;  
}


#tableDiv{
    width: auto;
    height: auto;
    margin: auto;
    padding: 2px 0px 0px 0px;
    border: 3px solid #ccc;
   }

Answer 1

首先，javascript代码应该在标签之间。如果它仍然无法工作，请尝试使用Jquery库，这将更容易

Answer 2

您可以像下面那样更新CSS，它会使卡片的间距相等。

table tr td {
    padding: 5px;
    text-align: center;
}

实际上有三个版本的游戏，简单，中等和艰难。因此，您可以根据通过java脚本选择的游戏类型动态更改表格宽度。

对于ex：对于简易模式，您可以将#tableDiv宽度更新为960px，并且随着表格的增长，将不同的游戏模式的宽度更新为不同的宽度。

#tableDiv {
    border: 3px solid #ccc;
    height: auto;
    margin: auto;
    padding: 2px 0 0;
    width: 960px;
}

Answer 3

更新你的CSS

#tableDiv {
    width: auto;
    height: auto;
    margin: auto;
    padding: 2px 0px 0px 0px;
    border: 3px solid #ccc;
    float: left;
}
table {
    /* width: 100%; */
    border-collapse: collapse;
    table-layout: fixed;
}

动态Javascript表边框没有正确调整大小

3 个答案: