Make inline-block divs appear underneath instead of overlapping - html

Question

HTML:
<div id="parent">
<div class="child1">
<img src="img/top.png"/>
</div>
<div class="child2">
<img src="img/middle.png"/>
</div>
<div class="child3">
<img src="img/bottom.png"/>
</div>
</div>
CSS:
.child1{
display: inline-block;
}
.child2{
display: inline-block;
}
.child3{
display: inline-block;
}
I have the display set to inline-block because I want the divs to fit the size of the image that they contain (different size for each). However, when I have it set up this way, they appear one after another from left to right. I would like them to be stacked, where child2 is directly below child1 and child3 is directly below child2.
Thanks

Answer 1

Solve using flexbox
#parent {
display: flex;
flex-direction: column;
align-items: center;
}
<div id="parent">
<div class="child1">
<img src="http://lorempixel.com/400/200" alt="random">
</div>
<div class="child2">
<img src="http://lorempixel.com/600/200" alt="random">
</div>
<div class="child3">
<img src="http://lorempixel.com/400/200" alt="random">
</div>
</div>
If you really want to make divs elements to fit exactly the size of its contained image, then you must remove empty spaces or set font-size: 0 on parent's container (or child divs)
Check this pen

Answer 2

Give each child div width:100% and give the #parent div text-align:center
#parent {
text-align: center;
}
#parent>div {
width: 100%;
display: inline-block;
}
<div id="parent">
<div class="child1">
<img src="http://dingo.care2.com/pictures/greenliving/uploads/2013/10/cat-with-stunning-green-eyes.jpg" />
</div>
<div class="child2">
<img src="http://www.top13.net/wp-content/uploads/2015/02/cat-photography-zoran-milutinovic-Fluffy-The-King.jpg" />
</div>
<div class="child3">
<img src="https://i.imgur.com/D2cqjmO.jpg" />
</div>
</div>

Answer 3

Update your css like this
.child1{
float:left;
clear:both;
}
.child2{
float:left;
clear:both;
}
.child3{
float:left;
clear:both;
}