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..