javascript - 设置动态变化的元素的左侧位置(循环中)

Question

我有以下 JavaScript 代码。 ***

var pos = document.getElementById('pos');
pos.style.position = 'relative';
pos.style.width = '100%';
pos.style.height = '100%';
pos.style.background = 'gray';
for(i=1;i<4;i++)
{
var div = document.createElement('div');
var node = document.createTextNode("This is new.");
div.appendChild(node);
var j = i-1;
var f = Math.round(250/(i+1));
var d = Math.round(250/i);
var col = 'rgb('+f+','+140+','+d+')';
div.style.background = col;
div.style.width = '200px';
div.style.height = '300px';
div.style.position = 'relative';
div.style.top = '0px';
div.style.border = 'solid';
div.style.borderColor = 'green';
div.style.borderWidth = '2px';
left = Math.floor((j*200)+30+30);
left = left+'px';
div.style.left = '30px';
pos.appendChild(div);
}

---

HTML 代码: ***

<div id = "pos"></div>

---

第一个元素的位置正确，顶部 0 像素，左侧 30 像素，但是第二个和第三个元素偏离了标记，我尝试使用显示作为内联，但仅将它们设置在同一行，但未设置左侧定位。结果是 as shown in this picture

But I would like it to appear as:

Answer 1

添加一个 display:inline-block 并将一些 margin-right:10px 添加到动态创建的元素

这是编辑后的代码:

var pos = document.getElementById('pos');
     pos.style.position = 'relative';
     pos.style.width = '100%';
     pos.style.height = '100%';
     pos.style.background = 'gray';
     for(i=1;i<4;i++)
     {
     var div = document.createElement('div');
     var node = document.createTextNode("This is new.");
     div.appendChild(node);
     var j = i-1;
     var f = Math.round(250/(i+1));
     var d = Math.round(250/i);
     var col = 'rgb('+f+','+140+','+d+')';
     div.style.background = col;
     div.style.width = '200px';
     div.style.height = '300px';
     div.style.position = 'relative';
     div.style.display="inline-block"; //add this line
     div.style.marginRight="10px";     //add this line
     div.style.top = '0px';
     div.style.border = 'solid';
     div.style.borderColor = 'green';
     div.style.borderWidth = '2px';
     left = Math.floor((j*200)+30+30);
     left = left+'px';
     div.style.left = '30px';
     pos.appendChild(div);
     }

检查fiddle