Box align with other boxes

Question

As you can see, that box has less height and I wanted the bottom one to stack with it, is it possible to do it? Any help will be appreciated.

This is the css I have:

<style>
div{
  display: inline-block;
  margin:0;
  position:relative;
  top:0;
  border:1px solid black;
}
</style>

something like this ? https://stackoverflow.com/questions/45753790/align-images-on-each-other — Neil, Sep 01 '17 at 11:39
@AndyHolmes Can you please explain better? I don't know much about flex — I_like_trains, Sep 01 '17 at 11:39
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - this will help you — Andy Holmes, Sep 01 '17 at 11:41
You can achieve this with two approaches: either you use flex or display: grid. Here's a tutorial/guide how to use grid: https://css-tricks.com/snippets/css/complete-guide-grid/ — maverick, Sep 01 '17 at 11:41
@Neil That's exacly what I need, but I looked it up and it's kinda confusing, can you explain it better and add an example? — I_like_trains, Sep 01 '17 at 11:43
People won't code the thing for you, the 2 links should give you plenty of insight on how to do this — Andy Holmes, Sep 01 '17 at 11:44
@AndyHolmes Flex doens't really work for me, so I'll try the grid — I_like_trains, Sep 01 '17 at 11:45
@maverick I didn't quite understand the grid option, it doesn't show something i need, no example of how to align like I needed. — I_like_trains, Sep 01 '17 at 11:48
This question is too often asked. What you want is something called "masonry". Google for that or search for it here on SO: https://stackoverflow.com/search?q=masonry — Rob, Sep 01 '17 at 11:58
See my answer! I've linked two jsfiddle with how display: flex works and how display: grid works. Either way you choose, it should help solve your question. @BrunoMoutinho — maverick, Sep 01 '17 at 12:19

score 2 · Answer 1 · edited Sep 01 '17 at 13:03

2

Just use flex's rule align-items: center.

See this article for more details.

edited Sep 01 '17 at 13:03

Ivan

34,531
8
55
100

answered Sep 01 '17 at 11:44

Davit Yavryan

180
1
10

This doesn't answer the question and link only answers are not allowed. Either use information from the link to form your own answer or delete this altogether. https://stackoverflow.com/help/how-to-answer – Rob Sep 01 '17 at 12:18

Box align with other boxes

1 Answers1