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:
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. ---------------- | |
| | | |
| | | |
| | ------------------
| | ------------------
| | | |
---------------- | |
vacío | |
-----------------
----------------- -----------------
| | | |
| | | |
| | | |
----------------- -----------------
| | | |
| | | |
| | ------------------
| | ------------------
| | | |
---------------- | |
vacío | |
-----------------
----------------- -----------------
| | | |
| | | |
| | | |
----------------- -----------------
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>