Javascript将图像排列为一堆卡片

我是javascript新手，所以我确信在理解javascript的过程中我遗漏了很多东西。 我要做的是创建一层图像，使其看起来像一堆卡片

我见过类似的代码，并试图按照他们的想法，但我只是不能得到图像的位置正确。所有10幅左右的图像都放在完全相同的位置

有什么可以帮助我们了解他们为什么不定位？还有什么是“em”。我找不到关于它的任何文献，但假设它是像px一样的测量值？？为什么在“”中

函数显示（）{
var-el；
左向量=0；
var-top=0；
var i=0；
var n=甲板长度；
var-cardNode；
var img=document.createElement（“img”）；
img.src=“wendell7_back.png”；
el=document.getElementById（'deck'）；
el.儿童（img）；
而（el.firstChild！=null）el.removeChild（el.firstChild）；
对于（i=0；i

我猜您的偏移量太小了：如果为了测试起见，将“em”替换为“px”，并将

左侧的
和
顶部的
变量增加10而不是0.1，我打赌您会看到一些结果

要解释em:1em等于元素的当前字体大小。如果尚未设置字体大小，则使用浏览器默认设置。如果在body标签上将字体大小设置为例如20px，则1em将等于20px。
请确保您的“卡片”已将css属性“位置”设置为“绝对”或“相对”。
该代码存在一些问题

您只使用一个
img
，然后将其附加到您创建的每个
div
。当您将一个元素附加到另一个元素时，如果它已经在DOM树中，那么您最终会移动它。您需要为每张卡创建一个单独的
img
元素

您没有向我们展示您的CSS，但是除非您使用CSS将
deck
元素下的所有
div
元素绝对或相对定位，否则
左侧的
和
顶部的
样式属性将被忽略，因为
div
将受到正常流的影响

还有什么是“em”。我找不到关于它的任何文献，但假设它是像px一样的测量值

是的，这是一个很好的例子。“em”是大写字母
M
的宽度

为什么在“”中

因为它是一根线。你还必须在引号中加上“px”。您正在使用此代码执行的操作：

cardNode.style.left = left + "em";

…正在使用JavaScript设置样式属性。样式属性始终是字符串，在本例中，您将创建“0.1em”和“0.2em”等字符串

一些阅读：







这是一本关于JavaScript的好书，我非常喜欢JavaScript:DavidFlanagan的权威指南
一本关于CSS和HTML创作的好书
“em”是使用的任何字体中的“M”的宽度（如果没有任何内容覆盖它，则为浏览器的默认字体）

您的代码中至少有两处错误：
left和top没有任何意义，除非它们所应用的元素也有position:absolute或position:relative（我认为是position:fixed）。最安全的方法是将position:relative（但没有left:或top:）应用于容器，将position:absolute应用于每个卡。
只有一个img。对于多张卡，您需要多个img，否则同一个img会被反复重新定位。
更经济的方法可能是为多张卡显示单独的“堆栈”图像，为单个卡显示单个卡图像

更经济的方法是只显示带有“工具提示”的单张卡图像，以指示堆栈中的卡数。我已经成功地将此技术应用于一个病人游戏的实现中

当然，如果您想将多张卡显示为一组“扇出”的向上翻转的卡，则这些替代技术不起作用。
创建一个类并修改该类在甲板上的位置。以下是工作代码：

function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
el = document.getElementById('deck');
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++) 
{
    cardNode = document.createElement("DIV");
    cardNode.className = "card2";
    var img = document.createElement("IMG");
    img.src = "wendell7_back.png";
    cardNode.appendChild(img);
    cardNode.style.left = left + "em"; 
    cardNode.style.top = top + "em";
    el.appendChild(cardNode);
    left += .1;
    top  -= 6.2;
}

}

函数显示（）{
var-el；
左向量=0；
var-top=0；
var i=0；
var n=甲板长度；
var-cardNode；
el=document.getElementById（'deck'）；
而（el.firstChild！=null）el.removeChild（el.firstChild）；
对于（i=0；i

希望这会有所帮助。
“还有什么是“em”。我找不到任何关于它的文献……”在搜索“em”时，请尝试顶部结果。这真的是一个排版术语。对于JavaScript新手来说，这是一个巨大的努力！嗯，谢谢你的指导。我想我快要解决问题了“…病人的游戏…”你是说？
function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
el = document.getElementById('deck');
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++) 
{
    cardNode = document.createElement("DIV");
    cardNode.className = "card2";
    var img = document.createElement("IMG");
    img.src = "wendell7_back.png";
    cardNode.appendChild(img);
    cardNode.style.left = left + "em"; 
    cardNode.style.top = top + "em";
    el.appendChild(cardNode);
    left += .1;
    top  -= 6.2;
}

}