javascript - Isotope Masonry with multiple widths columns -



javascript - Isotope Masonry with multiple widths columns -

i'm trying layout using has 3 different widths using masonry:

the problem lastly element doesn't seem work get:

this code:

$( function() { $('.isotope').isotope({ itemselector: '.item', masonry: { columnwidth: 394 } }); }); #main{ width: 1250px; margin: 0 auto; .isotope{ max-width: 1250px; .item { float: left; width: 394px; &.width2 { width: 835px; } &.width3 { width: 367px; } } } } <div id="main"> <div class="isotope"> <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-1.jpg"></div> <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-2.jpg"></div> <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-3.jpg"></div> <div class="item width2"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-4.jpg"></div> <div class="item width3"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-5.jpg"></div> </div> </div>

any ideas problem?

1.jpg wider image , 2.jgp little onces

class="snippet-code-html lang-html prettyprint-override"> <div id="main"> <div class="isotope"> <div class="item"><img src="2.jpg"></div> <div class="item"><img src="2.jpg"></div> <div class="item"><img src="2.jpg"></div> <div class="item width2"><img src="1.jpg"></div> <div class="item width3"><img src="2.jpg"></div> </div> </div>

hey split class items in code , worked.

class="snippet-code-css lang-css prettyprint-override"><style> #main{ width: 1250px; margin: 0 auto; } #main .isotope{ max-width: 1250px; } .item { float: left; width: 394px; } .width2 { width: 835px; } .width3 { width: 367px; } </style>

javascript html css plugins

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -