设置动态变化的元素的左侧位置（在循环中）

Question

我有以下 JavaScript 代码。 ***

var pos = document.getElementById('pos');
pos.style.position = '相对';
pos.style.width = '100%';
pos.style.height = '100%';
pos.style.background = '灰色';
for(i=1;i {
var div = document.createElement('div');
var node = document.createTextNode("这是新的。");
div.appendChild(节点);
变量 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 = '相对';
div.style.top = '0px';
div.style.border = '实心';
div.style.borderColor = '绿色';
div.style.borderWidth = '2px';
左 = Math.floor((j*200)+30+30);
左=左+'px'；
div.style.left = '30px';
pos.appendChild(div);
}

---

HTML 代码： ***

---

第一个元素的位置正确，顶部为 0px，左侧为 30px，但第二个和第三个不正确，我尝试将显示用作内联，但仅将它们设置在同一行但未设置左侧定位。结果是 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

Answer 2

 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';  //added 
     div.style.marginLeft = '1%';       //added
     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);
     }

将每个 div 显示为 inline-block 并给它们一个边距 Check this