Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Corrección de galería con Float

Estas en el tema de Corrección de galería con Float en el foro de HTML en Foros del Web. Básicamente, chicos. Quiero preguntar como acomodar el css para eliminar este espacio entre los cuadros y los cuadros dentro con float. Verán, graficamente, me está ...
  #1 (permalink)  
Antiguo 03/03/2017, 19:13
Avatar de LucasAddams  
Fecha de Ingreso: febrero-2015
Ubicación: Argentina
Mensajes: 26
Antigüedad: 9 años, 4 meses
Puntos: 3
Corrección de galería con Float

Básicamente, chicos. Quiero preguntar como acomodar el css para eliminar este espacio entre los cuadros y los cuadros dentro con float.

Verán, graficamente, me está pasando esto:


y quiero lograr esto:


En cuanto al código, está 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{
	width: 80%; /*del contenedor*/
	height: 1312px !important;
	margin: 0 auto;
	overflow-y: auto; }

.cuadro{
        width: 219px;
	height: 219px;
	float: left !important;}
No lo estaría pudiendo resolver, che. Gracias!
  #2 (permalink)  
Antiguo 04/03/2017, 00:39
Avatar de LucasAddams  
Fecha de Ingreso: febrero-2015
Ubicación: Argentina
Mensajes: 26
Antigüedad: 9 años, 4 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*/
}

Etiquetas: correccion, css, espacios, float, galeria
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:59.