[SOLUCIONADO] Cual es la mejor manera de hacer esto?

[Erink]

Buenas, primero decir que no tengo ni idea de CSS pero tengo en mente hacer una pequeña web y he visto que me es necesario, asi que aquí estoy intentando llevarlo a cabo.
Quiero hacer algo como esto:

Son una serie de imagenes con 2/3 lineas de texto debajo. Como digo no tengo ni idea y mirando algún tutoríal lo he hecho de la siguiente manera:
Cada foto con el texto lo he puesto dentro de un div(que les he llamado box_1, box_2, etc), y luego en el css lo estaba haciendo asi:

Código:

                #box_1 { 
			position: absolute;
		 	top: 160px;
		 	left: 70px;
		 	width: 240px;
		 	height:199px;
			}
		#box_2 { 
			position: absolute;
		 	top: 160px;
		 	left: 370px;
		 	width: 240px;
		 	height: 199px;
			
		}
etc..

Asi funciona, pero claro si la ventana es mas pequeña, la cosa se ve fatal. Entonces mi pregunta es si hay alguna forma mas optima de hacer esto para que se adapte mejor al tamaño del navegador? Una opción podría ser que si la pantalla fuera mas pequeña salieran 3 columnas en vez de 4, si todavía es mas pequeña que salieran 2..

Si se puede me podeis guiar sobre como encaminarlo? He probado a ponerle porcentaje en vez de pixeles pero el resultado aun es peor, también he cambiado lo que me decía la lógica (lo de position:absolute) pero el desastre aun ha sido mayor..

[fede5426]

Yo lo haría asi:

Código HTML:

<div class="contenedor">
  
   <div class="elemento">
    <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  
  <div class="elemento">
    <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  
  <div class="elemento">
    <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  
  <div class="elemento">
    <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  
  <div class="elemento">
    <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  
  <div class="elemento">
    <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  
  <div class="elemento">
    <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  
  <div class="elemento">
    <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  
</div> <!-- Fin Contenedor -->
 

Código CSS:

.contenedor{
  max-width:800px;
  margin:0 auto;
  background:#c2c2c2;
  text-align:center;
}
 
.elemento{
  width:150px;
  margin:1em;
  display:inline-block;
  vertical-align:top;
}
 

http://codepen.io/anon/pen/ZGQjLd

[Erink]

Gracias!! Lo he probado y creo que es justo lo que buscaba!! Desde luego mucho más elegante.

Además tenia un problema porque quería poner un pie de pagina y no lo conseguía, porque me salía encima de todo y ahora ya aparece debajo como quería.

thanks!

[fede5426]

Iniciado por Erink

Gracias!! Lo he probado y creo que es justo lo que buscaba!! Desde luego mucho más elegante.

Además tenia un problema porque quería poner un pie de pagina y no lo conseguía, porque me salía encima de todo y ahora ya aparece debajo como quería.

thanks!

Normal que el footer aparezca arriba si estas usando posiciones absolutas

De nada, no te olvides de marcar el tema como solucionado.

[MatyD]

Fede aprovecho a entrar en esta discusión también.

Estába intentando darle una solución usando flexbox, como podría hacerse esto con flexbox, porque me aparecen los 8 elementos en la misma linea, como puedo hacer que aparezcan 4 y 4?

[fede5426]

Sinceramente no he trabajado nunca con flexbox, pero siguiendo ésta guia debería ser algo asi:

Código CSS:

.contenedor{
  max-width:800px;
  margin:0 auto;
  background:#c2c2c2;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
 
.elemento{
  width:150px;
  margin:20px;
}
 

http://codepen.io/anon/pen/yNeqmN

Aunque el contenido no queda centrado..