Puedes hacerlo haciendo una grilla con Flexbox. Por defecto, un elemento flex
cuya dirección es row
(horizontal) estira a sus hijos verticalmente, de modo que todos ocupan el mismo alto.
Además preferencia, dale un alto fijo a las imágenes y un ancho a las cajas de acuerdo a la resolución en la que se muestren. Por ejemplo, en móbiles las imágenes podría ser 200px de alto, en tablets, 250px, en laptops, 300px, etc. Así mismo, las cajas pueden tener un ancho inicial del 80% de la pantalla y conforme vaya creciendo la resolución, se reduce su ancho para que se vayan mostrando horionalmente. Esto lo puedes hacer fácilmente mediante media queries.
Ejemplo
Mira el ejemplo en varias resoluciones para ver como cambian su ancho.
.posts {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
.post {
border-radius: 3px;
box-shadow: 0 4px 2px 0 rgba(0, 0, 0, .25), 0 -1px 1px 0 rgba(0, 0, 0, .1);
display: flex;
flex-direction: column;
margin: 12px 5px;
width: 80%;
}
.post figure {
height: 200px;
margin: 0;
width: 100%;
}
.post figure img {
height: 100%;
width: 100%;
}
.post pre {
color: #555;
font-family: 'Noto Sans', sans-serif;
font-size: 15px;
line-height: 22px;
overflow: hidden;
padding: 0 10px;
text-align: justify;
white-space: pre-wrap;
word-wrap: break-word;
max-width: 100%;
}
@media screen and (min-width: 700px) {
.posts {
justify-content: space-between;
}
.post {
width: 45%;
}
}
@media screen and (min-width: 1024px) {
.posts {
justify-content: space-between;
}
.post {
width: 30%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="posts">
<article class="post">
<figure>
<img src="http://travelkids.es/Uploads/ImageGalleryModuleDto/ORLANDO.jpg" alt="">
</figure>
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, tempora ad omnis harum excepturi neque illo. Deserunt suscipit nesciunt consequatur ullam, facere molestiae quo sequi. Officiis voluptate eos ipsa quod!</pre>
</article>
<article class="post">
<figure>
<img src="http://travelchannel.sndimg.com/content/dam/images/travel/fullset/2014/12/3/top-california-beach-getaways-venice-beach.jpg.rend.tccom.1280.960.jpeg" alt="">
</figure>
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque temporibus ea necessitatibus consectetur animi, fuga minima deserunt vero placeat quas molestias accusantium reiciendis consequatur amet facilis consequuntur velit, neque omnis!</pre>
</article>
<article class="post">
<figure>
<img src="http://www.leannemoore.ie/wp-content/uploads/2016/09/london.jpg" alt="">
</figure>
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio vitae eaque voluptatem, ratione aspernatur? Quidem laboriosam voluptate nam perferendis praesentium ut delectus, asperiores labore sed optio reprehenderit illo neque.</pre>
</article>
<article class="post">
<figure>
<img src="http://sitiosturisticos.com/wp-content/uploads/2011/05/Madrid.jpg" alt="">
</figure>
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ad, voluptates aut, in nam veritatis. Tempore tenetur est doloremque ratione consectetur perferendis, voluptate odit beatae recusandae in id blanditiis odio?</pre>
</article>
</div>
</body>
</html>