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

Posted 2023-05-09

【中文标题】设置动态变化的元素的左侧位置（在循环中）

【英文标题】：Setting left position of an element that changes dynamically(in a loop)

【发布时间】：2016-01-16 00:08:04

【问题描述】：

我有以下 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:

【参考方案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

【参考方案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

【讨论】：

以上两个答案都按要求返回显示，但我的问题是如何确保在不使用边距的情况下正确设置左侧和顶部，因为我的代码取决于不时变化的数字，我们根据创建的对象数量从中心设置创建的对象，因此每个元素每次都不会相同

为此我们应该以百分比设置宽度