Search code examples
javascripthtmlheightinline

Equalize DIVs height on the same line without container


I have a list of divs (inline-block) with fixed width 350px and auto height to fit the content. The divs are displayed inline so it will display :

  • 1920px > 5 articles per line
  • 1700px > 4
  • 1366px > 3 articles.

and so on ... So i found my self with with different height divs, My question is is there a way to equalize the height of divs in same line, for example : Line 1 : highest div is 540px so all divs in same line will be 540px Line 2 : highest is 480px so all divs in it line will be 480

I know a script which will search for the biggest height and apply it to all divs, but if the biggest height is for example 600 px it will reproduce a big blank in line with lil content divs if it apply it to all.

PS : If possible without a container, because a row must be responsive according to screen width, and without using flex (ok the flex condition is lil bit stupid i admit) .?!!! Thanks


Solution

  • A new container needs to be added to support the rest of the divs. The divs, on their own, can't figure out where they are in the window with the way you have it. Also, you should read about flex, it's very helpful. Here's the W3 pen you posted but updated.