простые диаграммы с помощью дивы

Question

я использую следующие для получения блок-схема

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) 
 
}

Однако даже если мои координаты у всегда равны нулю, по крайней мере, это то, что я думаю, вместо того, чтобы видеть прямоугольники в одном Кажется, что они добавлены вертикально, любая идея, почему это происходит?

Answer 1

По умолчанию Div имеют display: block, что приведет к тому, что они будут нажимать другой контент на следующую строку. Вы можете исправить это, говоря эти дивы быть 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

Свойство default default display - block. Вероятно, вы хотите использовать inline-block для создания диаграммы.

См here