0

I have the following Javascript code:

{
var x = document.createElement('div'); 
x.setAttribute('class','rowone');
x.setAttribute('id',i);
var move = 4;
x.style.marginLeft = move + "%";
x.addEventListener('click',clickdata,'false');
     } // creating each div block
{ 

  var p = document.createElement('IMG');
  p.style.width = "80%";
  p.style.height="100%";
   p.src = orderone[i];
x.appendChild(p);
   } // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
} // creating first row and adding event listener
for(var j = 0; j < 8; j++){
{
var x = document.createElement('div'); x.setAttribute('class','rowtwo');
x.setAttribute('id',j+8);
var moverow = 4;
x.style.marginLeft = moverow + "%";
x.addEventListener('click',secondclick, 'false');
} // creating each div block
{ 
/*var p = document.createElement('p');
p.innerHTML = ordertwo[j];*/
  var otherp = document.createElement('IMG');
  otherp.style.width = "80%";
  otherp.style.height="100%";
   otherp.src = ordertwo[j];
x.appendChild(otherp);
  } // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
 }

(orderone and ordertwo are just the arrays of images) What it does is that it creates two rows of divs, all divs having an image (from orderone or ordertwo). This is what it should look like: Ideal case

However, the rows often just break up randomly (sometimes it works right, other times it just gives some other assortment, like below): not Ideal case

What do I do?

1
  • Your images are different heights. Make them all the same height and they will arrange how you want.
    – Alohci
    Commented May 22, 2023 at 0:13

1 Answer 1

0

Set all the div containers to the same height and overflow to hidden like this:

.myDivs { 
    height: 200px;
    overflow: hidden;
}

Change the height to match the bulk of your images or the height of the tallest image. Anything that is taller than your height will be hidden

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.