Foros del Web » Creando para Internet » CSS »

Divisores flotantes estilo galería Tumblr

Estas en el tema de Divisores flotantes estilo galería Tumblr en el foro de CSS en Foros del Web. ¡Hola a tod@s! Estoy intentando conseguir acomodar unos divisores de ancho máximo fijo cómo la típica galería de tumblr de fotos de distintos tamaños que ...
  #1 (permalink)  
Antiguo 08/02/2018, 10:48
 
Fecha de Ingreso: octubre-2014
Mensajes: 25
Antigüedad: 9 años, 6 meses
Puntos: 0
Divisores flotantes estilo galería Tumblr

¡Hola a tod@s!

Estoy intentando conseguir acomodar unos divisores de ancho máximo fijo cómo la típica galería de tumblr de fotos de distintos tamaños que se acomodan entre ellas ocupando todos los espacios. Lo he intentado de la siguiente manera pero cuando un divisor tiene un texto más largo que el otro se dejan espacios debajo, no se acomodan para rellenarlos.

Cita:
---------------- | |
| | | |
| | | |
| | ------------------
| | ------------------
| | | |
---------------- | |
vacío | |
-----------------
----------------- -----------------
| | | |
| | | |
| | | |
----------------- -----------------
Mi idea es que se hagan dos o tres columnas (medidas por el ancho) y que se vayan acomodando sin dejar espacios, tipo esto https://images.template.net/wp-content/uploads/2016/04/25120012/Gallery-Responsive-Portfolio-Tumblr-Theme-32.jpg.

Dejo los códigos:

Código:
.cuerpo {
	clear:both;
	overflow: hidden;
	width: 100%;
 	height: auto;
 	margin:0;
 	padding:80px 120px;
	box-sizing: border-box;
}

.cajas{
	float:left;
        clear:right;
	max-width: 600px;
	width:100%;
	margin:15px;
	padding:15px;
	box-sizing:border-box;
	overflow:hidden;
	position: relative;
	background:#eee;
}
Código HTML:
<div class="cuerpo">
	
	<div class="cajas"></div>
	<div class="cajas"></div>
	<div class="cajas"></div>
	<div class="cajas"></div>
	<div class="cajas"></div>
	<div class="cajas"></div>
	<div class="cajas"></div>

</div> 
Espero puedan ayudarme >_<

Última edición por Llunetica; 08/02/2018 a las 11:01
  #2 (permalink)  
Antiguo 08/02/2018, 11:15
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Respuesta: Divisores flotantes estilo galería Tumblr

Eso que buscas se llama 'Masonry Layout' y podes lograrlo o con flexbox o con Grid CSS te dejo un ejemplo
https://masonry.desandro.com/layout.html

Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho

Etiquetas: cssayuda, flotantes, galeria, tumblr
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 15:09.