Question

我使用以下内容制作图表

＆＃13;

for(let i=0;i<1000;i++){
  let rect = document.createElement('div')
  rect.style.backgroundColor = '#dd21d1'
  rect.style.height = Math.random() +'px'
  rect.style.width='.5px'
  rect.style.transform = `scaleY(100) translateX(${i}px)`
  document.body.appendChild(rect)
}

＆＃13;

然而即使我的y坐标总是为零，至少我认为是这样，而不是看到一行中的矩形似乎它们是垂直添加的，任何想法为什么会发生这种情况？

Answer 1

默认情况下，Div有display: block，这会导致他们将其他内容推送到下一行。您可以通过在追加到正文之前添加此行来告知这些div为inline-block来解决此问题：

rect.style.display = 'inline-block'

整个代码段将更新为：

for(let i=0;i<1000;i++){
  let rect = document.createElement('div')
  rect.style.backgroundColor = '#dd21d1'
  rect.style.height = Math.random() +'px'
  rect.style.width='.5px'
  rect.style.transform = `scaleY(100) translateX(${i}px)`
  rect.style.display = 'inline-block'
  document.body.appendChild(rect)
}

Answer 2

CSS默认display属性为block。您可能希望使用inline-block来创建图表。

请参阅here

使用div的简单图表

2 个答案: