Varios DIV autoajustables al redimensionar ventana

[pubo68]

Hola,
en primer lugar presentarme, ya que soy totalmente nuevo en este foro . Salud!

Veréis, estoy tratando de poner bloques div con una imagen dentro, en forma de 4 columnas, y que queden todos alineados en una misma fila.
Me gustaría que al redimensionar la pantalla, los bloques se reordenen en filas de 3 columnas, luego 2 y al final en 1 sola columna, dependiendo del tamaño de la pantalla.

He intentado ponerlos unos tras de otros <div></div><div></div> con la propiedad float:left, pero no da resultado.
¿se os ocurre cómo podría hacer esto?

Sería algo como:


Muchas gracias!

[pzin]

Pues más que flotarlos no deberías de hacer. ¿Puedes poner el código HTML/CSS de esos elementos y de su contenedor?

[minombreesmm]

Iniciado por pubo68

Hola,
en primer lugar presentarme, ya que soy totalmente nuevo en este foro . Salud!

Veréis, estoy tratando de poner bloques div con una imagen dentro, en forma de 4 columnas, y que queden todos alineados en una misma fila.
Me gustaría que al redimensionar la pantalla, los bloques se reordenen en filas de 3 columnas, luego 2 y al final en 1 sola columna, dependiendo del tamaño de la pantalla.

He intentado ponerlos unos tras de otros <div></div><div></div> con la propiedad float:left, pero no da resultado.
¿se os ocurre cómo podría hacer esto?

Sería algo como:


Muchas gracias!

Código CSS:

#cadadiv{
display:inline;
}
 

Código HTML:

<div id="cadadiv"><img src="rutaimagen"/></div>
<div id="cadadiv"><img src="rutaimagen"/></div>
<div id="cadadiv"><img src="rutaimagen"/></div>
<div id="cadadiv"><img src="rutaimagen"/></div>
<div id="cadadiv"><img src="rutaimagen"/></div>
 

[pubo68]

Uy! Perdonar por no contestar antes, pero tenía deshabilitada la opción de que me manden un correo cuando alguien conteste al hilo :-/

Muchas gracias a los dos por contestar. Voy a probar la opción de "minombreesmm", y si no pego el código que tengo.

Salud!

[pzin]

Iniciado por pubo68

He intentado ponerlos unos tras de otros <div></div><div></div> con la propiedad float:left, pero no da resultado.

Es que más que esto no deberías de hacer. Al flotar el elemento ya se va ajustando. A menos que hayas hecho alguna otra cosa. Por eso te decía que pusieras el código HTML/CSS que estés usando.

No uses display: inline como comentan arriba porque eso causará otros problemas.

[pubo68]

Bueno, tras dar unas cuantas vueltas, he conseguido parte del objetivo.
Ahora ya aparecen los bloques bien ordenados, y conforme se va estrechando la pantalla, se recolocan en distintas líneas.

Ahora me gustaría que todo quedase centrado en la pantalla. Para eso he intentado poner un DIV general que englobe a los demás, pero no termino de conseguirlo.
Aquí va el código:

Código:

CSS:
.bloquelibros{
  width: 90%;
  margin:  0 auto;
  text-align: center;
  border-style:solid;
  border-width:5px;
  display: table;

}
.libros {
  float: left; 
  width: 200px; 
  height: 200px; 
  text-align: center;
  vertical-align:bottom; 
  margin: auto 15px 100px 15px;
}

HTML

Código:

<div class="bloquelibros">
	<div class="libros"><a href="http://...">BlaBlaBla</a><br /><a  type="image" href="2048/0140.jpg" target="_blank"><br /><img src="thumbnails/0140.jpg" alt="0140" width="200" height="115" /></a>
	</div>

	<div class="libros"><a href="http://...">BlaBlaBla</a><br /><a  type="image" href="2048/0140.jpg" target="_blank"><br /><img src="thumbnails/0140.jpg" alt="0140" width="200" height="115" /></a>
	</div>
	...
	...
	...
</div>

NOTA: Lo de "display:table" lo he puesto porque si no aparecían los dos DIV como independientes en vez de estar anidados.

[pzin]

Los elementos flotados no pueden centrarse automáticamente.

Lo que suele hacerse, es sacar el flotado, hacer inline-block y añadir un centrado de texto al elemento padre. Esto último ya lo tienes.

Código CSS:

.bloquelibros{
  width: 90%;
  margin:  0 auto;
  text-align: center;
  border-style:solid;
  border-width:5px;
  display: table;
 
}
.libros {
  display: inline-block; 
  width: 200px; 
  height: 200px; 
  text-align: center;
  vertical-align:bottom; 
  margin: auto 15px 100px 15px;
}
 

Lo del display: table no me quedó claro porqué lo vas a necesitar.

[pubo68]

Pzin. El puto amo

Muchas gracias a todos. Seguiré por aquí para aprender todo lo que pueda, a ver si algún día puedo aportar mi granito