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

Question

我有以下JavaScript代码***

var pos=文档。getElementById（'pos'）<位置样式。位置='相对'<位置样式。宽度='100%'<位置样式。高度='100%'<位置样式。背景='灰色'
对于（i=1；i

HTML代码：***

第一个元素的位置正确，顶部为0px，左侧为30px，但是第二个和第三个元素的位置不正确，我尝试使用显示作为内联元素，但仅将它们设置在同一行上，但未设置左侧位置。结果如图所示

但我希望它显示为：

Answer 1

 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块，并给它们一个边距，以便进行检查

Answer 2

添加一个display:inline块，并将一些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);
     }

检查小提琴