Javascript 创建的div元素'；随机边距无效 问题和源代码

我试图通过点击按钮在另一个

中创建

。单击按钮时，将创建一个具有唯一id的新内部

（在外部

中）。我的此部件正在工作，但我遇到了一个问题：我希望每个内部

都有一个随机的

页边距顶部

Javascript
CSS:
结果（点击按钮4次后）


结果（我通过检查浏览器中的内部元素得到）看起来一切正常-所有的
边距顶部都是随机的，就像我想要的那样。但是，视觉效果如下：


如您所见，黑色内部
都具有相同的
页边距顶部
。我做错了什么？如何使创建的
s都具有随机
页边距顶部
s
 CSS规范要求缺少一个单位的长度（不是零）被视为错误（因此被忽略）。因此，在生成的边距编号末尾添加
px
，一切都应该正常。
CSS规范要求缺少单位的长度（零除外）被视为错误（因此被忽略）。因此，在生成的边距编号末尾添加
px
，一切都会好起来。
我认为没有名称标签

<innerDiv1>



这可能就是原因。
我认为没有名称标签

<innerDiv1>



这可能是原因。
这可能是由
内联块
元素使用的位置模型造成的-它们都在一行中的底部垂直对齐

我建议您简化此操作，并将
position:block
与
float:left


我还建议您坚持使用标准元素以确保跨浏览器兼容性-不要创建自己的名为
innerDiv1
等的元素，而是使用具有唯一ID的
div
元素

function makeDiv(x) {
    var innerDiv = document.createElement("div");
    outer.appendChild(div);
    innerDiv.setAttribute('id', 'innerDiv' + x);
    innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
}; 

这可能是由于
内联块
元素使用的位置模型造成的-它们都在一行中的底部垂直对齐

我建议您简化此操作，并将
position:block
与
float:left


我还建议您坚持使用标准元素以确保跨浏览器兼容性-不要创建自己的名为
innerDiv1
等的元素，而是使用具有唯一ID的
div
元素

function makeDiv(x) {
    var innerDiv = document.createElement("div");
    outer.appendChild(div);
    innerDiv.setAttribute('id', 'innerDiv' + x);
    innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
}; 

描述
这是因为您设置了
display:inline块属性。这使得它们都在一行中，因此它们将联合到
innerDivx
，该
页边距顶部最高

删除
显示：内联块属性并给它们
float:left。如果您想保持两者之间的差距，还可以添加
左边距：5px。不要忘记，
页边距顶部
的值需要一个单位。我想您想使用
px

另外，
不是有效的HTML标记。您应该将它们更改为
，并将
innerDivx
用作id属性。此外，您的标记使用几乎相同的CSS样式，因此您应该将相同的样式放在一个类中，并添加该类

完整解决方案代码
HTML
添加框

JavaScript
var编号=0；
document.getElementById（“button1”）。addEventListener（“单击”，按按钮，错误）；
功能按钮（）{
++数量；
makeDiv（数字）；
};
函数makeDiv（x）{
var innerDiv=document.createElement（“div”）；
外部.appendChild（innerDiv）；
innerDiv.className+=“框”；
setAttribute（“id”，“innerDiv”+x）；
innerDiv.setAttribute（“样式”，“页边空白顶部：”+Math.floor（Math.random（）*51）+“px；”）；
}; 

CSS
#外部{
位置：绝对位置；
空白：nowrap；
高度：118px；
溢出：自动；
宽度：100%；
填充：2px；
}
.盒子{
浮动：左；
宽度：48px；
高度：48px；
背景色：#000；
左边距：5px；
}

描述
这是因为您设置了
display:inline块属性。这使得它们都在一行中，因此它们将联合到
innerDivx
，该
页边距顶部最高

删除
显示：内联块属性并给它们
float:left。如果您想保持两者之间的差距，还可以添加
左边距：5px。不要忘记，
页边距顶部
的值需要一个单位。我想您想使用
px

另外，
不是有效的HTML标记。您应该将它们更改为
，并将
innerDivx
用作id属性。此外，您的标记使用几乎相同的CSS样式，因此您应该将相同的样式放在一个类中，并添加该类

完整解决方案代码
HTML
添加框

JavaScript
var编号=0；
document.getElementById（“button1”）。addEventListener（“单击”，按按钮，错误）；
功能按钮（）{
++数量；
makeDiv（数字）；
};
函数makeDiv（x）{
var innerDiv=document.createElement（“div”）；
外部.appendChild（innerDiv）；
innerDiv.className+=“框”；
setAttribute（“id”，“innerDiv”+x）；
innerDiv.setAttribute（“样式”，“页边空白顶部：”+Math.floor（Math.random（）*51）+“px；”）；
}; 

CSS
#外部{
位置：绝对位置；
空白：nowrap；
高度：118px；
溢出：自动；
宽度：100%；
填充：2px；
}
.盒子{
浮动：左；
宽度：48px；
高度：48px；
背景色：#000；
左边距：5px；
}
对于
makeDiv
，您的
事件处理程序在哪里？这是我在提供的标记中看到的所有内容-对于
makeDiv
，您的
事件处理程序在哪里？这是我在提供的标记中看到的所有内容-所有div都继承了
max
值。谢谢！就是这么简单
function makeDiv(x) {
    var innerDiv = document.createElement("div");
    outer.appendChild(div);
    innerDiv.setAttribute('id', 'innerDiv' + x);
    innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
};