1

I want to align multiple images / boxes in the follwoing way:

...
<img  width="200"
  src="http://www.passmark.com/images/monitortestscreenshot5.gif" />

<img  width="250"
  src="http://www.passmark.com/images/monitortestscreenshot5.gif" />
...

Fiddle: https://jsfiddle.net/1eaxc7kr/2/

My problem with the shown fiddle is, that new elements in the second row should not have a margin to the upper element if they do not need to.

For example the first image of the second row (might depend on screen width) should be a directly below the very first element of the first row.

I tried using flexboxes but I somehow failed on finding a good way.

Here's what i tried:

img {
  vertical-align: top;
  display: inline-flex;
} 

.container {
  align-items: flex-start;
}
Frnak
  • 6,601
  • 5
  • 34
  • 67
  • You'll need columns to do that. Per the question title, if you don't want to use columns, then JS is your next best bet. – Abhitalks Feb 08 '16 at 09:55
  • isnt there an option to solve this with flexboxes? I thought I somewhere read something about this ... but I cannot find a good solution - The problems with columns will be that the width is fixed per column, so there can only be same width elements inside each column (or at least not wider) – Frnak Feb 08 '16 at 09:58
  • Yes, columns will cause you problems with horizontal holes -- https://jsfiddle.net/abhitalks/1eaxc7kr/9/; and flexboxes will cause you problems with vertical holes -- https://jsfiddle.net/abhitalks/1eaxc7kr/8/ – Abhitalks Feb 08 '16 at 10:09
  • Possible duplicate of [Is it possible for the items in a flexbox container that wraps in rows to align tightly to the items above them?](http://stackoverflow.com/questions/34480760/is-it-possible-for-the-items-in-a-flexbox-container-that-wraps-in-rows-to-align) – Michael Benjamin Feb 08 '16 at 12:46
  • Did your know masonry.js ? http://masonry.desandro.com/ This may solve your problem. – Arnaud Broc Feb 08 '16 at 09:59

0 Answers0