How can js generate randomly positioned but non-overlapping div filled containers

what I wrote was so messy that I tested the collision but didn"t know how to regenerate the location and set the generation of 20 elements not to ignore the elements because of overlap

is there any divine guidance

Mar.10,2021

order a takeout, drink a sip of water, and provide the following ideas for my analysis:

[fill the container] here the container is divided into two cases:

1, when the width and height of the container are both fixed

--  --
---  20div 

  div   :div 


  div average= 20/ 
div Flu average / 2  
div[ average-Fluaverage + Flu,... , 20 -  ]
div      = ;

 
   
2. When the width and height of the container is not fixed
    

final optimization code considered

Note: the train of thought may be a little rough, if it is better, please provide

Menu