동위 원소 벽돌

Question

내가 벽돌을 사용하여 3 가지 폭이있는 사용이 레이아웃을 할 노력하고있어 :

문제는 마지막 요소 그래서이 작동하지 않는다는 것입니다 내가 얻을 무엇 :

$(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> 

:

이 내 코드입니다

어떤 아이디어가 문제입니까?

Answer 1

1.JPG은 넓은 이미지와 2.jgp 작은 onces

<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>

이봐, 난 그냥 코드에서 클래스 항목을 분할하고 일이다.

<style> 
 
#main{ 
 
    width: 1250px; 
 
    margin: 0 auto; 
 
} 
 

 
#main 
 
.isotope{ 
 
     max-width: 1250px; 
 
} 
 
.item { 
 
     float: left; 
 
     width: 394px; 
 
} 
 
.width2 { 
 
     width: 835px; 
 
} 
 
.width3 { 
 
     width: 367px; 
 
} 
 
</style>