Images do not align and are different heights - css

Question

I have a problem with images displaying in different heights and text underneath not aligning.
this is the mark up, I have a six row containers to display 6 images
<div class="row">
<div class="posts">
<img src="images/bond.jpg" alt="quantum of solace">
<h3 class="title">Quantum of Solace</h3>
<p class="post-info">PG13 | 106min</p>
</div>
</div>
I am setting each post to 14% coz there are 6 of them allowing for 2.5% margin right. I tried to wrap image in a div and set that to overflow hidden, but didn't work.
.row {
width: 100%;
}
.posts {
width: 14%;
float: left;
margin-right: 2.5%;
}
.posts img {
width: 100%;
max-width: 100%;
border-radius: 0.5em;
}

Answer 1

If you can change the disposition of the nodes, you could align the text below the images using: display:table. See the next example:
.table {
display: table ;
}
.row {
display: table-row ;
}
.header, .title, .post-info {
display: table-cell ;
width: 14%;
padding: 0 1.25% 0.25% 1.25% ;
vertical-align: top ;
}
.header img {
max-width: 100%;
border-radius: 0.5em;
}
<div class="table">
<div class="row">
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/2/2d/Quantum_of_Solace_-_UK_cinema_poster.jpg" alt="quantum of solace">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/6/66/E_t_the_extra_terrestrial_ver3.jpg" alt="E.T. the Extra-Terrestrial ">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/a/a2/Star_Wars_The_Force_Awakens_Theatrical_Poster.jpg" alt="Star Wars VII">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/8/8e/DisneyCheshireCat.jpg" alt="Alice in Wonderland">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6c/XFilesMoviePoster.jpg" alt="The X-Files">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Poster_-_Gone_With_the_Wind_01.jpg/440px-Poster_-_Gone_With_the_Wind_01.jpg" alt="Gone with the Wind">
</div>
</div>
<div class="row">
<h4 class="title">Quantum of Solace</h4>
<h4 class="title">E.T. the Extra-Terrestrial </h4>
<h4 class="title">Star Wars: Episode VII The Force Awakens</h4>
<h4 class="title">Alice in Wonderland</h4>
<h4 class="title">The X-Files: Fight the Future</h4>
<h4 class="title">Gone with the Wind</h4>
</div>
<div class="row">
<p class="post-info">PG13 | 106min</p>
<p class="post-info">G | 115min</p>
<p class="post-info">PG13 | 136min</p>
<p class="post-info">G | 187min</p>
<p class="post-info">PG13 | 121min</p>
<p class="post-info">G | 238min</p>
</div>
</div>