Tengo una grilla de mampostería simple. Cuando carga la clase .content
es visible. Cuando vuelve a cargar, los elementos entran uno en el otro.Jquery Problema de altura de mampostería
Esto solo ocurre en Chrome y Safari, en Firefox se ve bien.
Aquí es el css de la red:
#media_list {}
#media_list .media_item { height: auto; width: 270px; display: inline-block; background: #f4f4f4; border: 1px solid #d9d7d5; float: left; padding: 10px 0px 10px 0px; font: 11px Helvetica Neue; }
#media_list .media_item .date { color: white; background: #2f343a; padding: 10px 5px; width: 260px; float: left; margin: 0px 0px 15px 0px;}
#media_list .media_item .content { padding: 15px; float: left; display: inline-block; margin-bottom: 20px; }
#media_list .media_item img { border: 1px solid #dedddd; margin: 0px 0px 10px 10px; width: 248px;}
Esta es la forma en la mampostería se llama:
$('#media_list').masonry({ // options
itemSelector : '.media_item',
columnWidth : 300
});
puedo trabajar alrededor de ella con min-height
s y margin
s, pero eso no es dinámico y doesn No se ven muy limpios.
Aquí está a JS Fiddle pero realmente no reproduce el problema.
si ejecuto $ ('# media_list'). Masonry ('reload'); en la consola resuelve el problema. no estoy seguro de cómo hacer que esto suceda cada vez que se carga – papacostas
No entiendo muy bien el problema :(¿Qué está haciendo mal? Y siempre se puede extender la albañilería con la recarga como usted dijo: p –
bien yo dos cosas. 1) ¿Por qué? ¿Se ve diferente cuando accede directamente desde la url frente a cuando presiona recargar? 2) cuál es un buen evento jquery para usar para ejecutar $ ('# media_list'). Masonry ('reload'); ¿mando? – papacostas