Ver Mensaje Individual
  #2 (permalink)  
Antiguo 04/03/2017, 00:39
Avatar de LucasAddams
LucasAddams
 
Fecha de Ingreso: febrero-2015
Ubicación: Argentina
Mensajes: 26
Antigüedad: 9 años, 5 meses
Puntos: 3
Busqueda Respuesta: Corrección de galería con Float

PARA FUTUROS TEMAS CON ESTE MISMO PROBLEMA:

Lo mejor es hacer así (dejo el código de solución hallado después de una siesta):

Código HTML:
<div id="campo-de-cuadros">
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
</div> 
Código:
#campo-de-cuadros{
	background: none;
	width: 81.2%;
	height: 1000px; /*El alto del div, si queres, para el scroll*/
	margin: 0 auto;
	overflow-y: auto;
}

.cuadro{
	width: 25%; /*Hacer en porcentaje si el campo está en porcentaje*/
	height: auto;
	float: left;
}
De esta manera, utilizando tanto el cuadro como el campo de cuadros en porcentajes, se logra que se queden alineados de manera correcta.

IMPORTANTE: Si el cuadro contiene una imagen <img src="la imagen"> les va a quedar un pequeño espacio abajo del float y para eliminarlo, hay que poner un display block, de manera que el código quedaría así:

Código HTML:
<div id="campo-de-cuadros">
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
</div> 
Código:
#campo-de-cuadros{
	background: none;
	width: 81.2%;
	height: 1000px; /*El alto del div, si queres, para el scroll*/
	margin: 0 auto;
	overflow-y: auto;
}

.cuadro{
	width: 25%; /*Hacer en porcentaje si el campo está en porcentaje*/
	height: auto;
	float: left;
}

.cuadro img{
	width: 100%;
	height: 100%;
	display: block; /*para ocultar el espacio*/
}