佈局

Question

我有我的CodePen

，目前看起來是這樣的

寬度由

確立建設博客概念

JavaScript

var container = document.querySelector('#container'); 
var msnry = new Masonry(container, { 
    // options 
    columnWidth: 240, 
    itemSelector: '.item' 
}); 

HTML

<div id="container" class="js-masonry" 
    data-masonry-options='{ "columnWidth": 240, "itemSelector": ".item" }'> 

CSS

.item { width: 25%; } 
.item.w2 { width: 50%; } 

但事情只是堆疊在彼此頂部。

---

編輯
現在是工作，但我不能刪除的問題。

Answer 1

<div class="item w2"> 
     <div class="item"> 
      <div class="postContent"> 
      <img src="http://media.tumblr.com/tumblr_ma8wodZv3b1rwp3js.jpg" width="300"> 
      </div> 

      <div class="notes"> 
      <a href="#"> 
       666 notes 
      </a> 
      <a href="#"> 
       Janurary 3, 2013 
      </a> 
      <a href="#"> 
       Reblog 
      </a> 
      </div> <!--/ .notes --> 
     </div> 


     <div class="item"> 
      <div class="postContent"> 
      <img src="http://www.dayo.com/fishid/christoftheabyss_3.jpg" width="300"> 
      </div> 
      <div class="notes"> 
      <a href="#"> 
       666 notes 
      </a> 
      <a href="#"> 
       December 12, 2012 
      </a> 
      <a href="#"> 
       Reblog 
      </a> 
      </div> <!--/ .notes --> 
     </div> 

     <div class="item"> 
      <div class="postContent"> 
      <img src="http://media.tumblr.com/tumblr_lw20o3UCOL1r1h2ku.jpg" width="300"> 
      </div> 
      <div class="notes"> 
      <a href="#"> 
       12 notes 
      </a> 
      <a href="#"> 
       June 1, 2012 
      </a> 
      <a href="#"> 
       Reblog 
      </a> 
      </div> <!--/ .notes --> 
     </div> 
</div> 

CSS Adjustment 

.item { width: 320px !important; float:left !important; } 
.item img { width: 300px !important; float:left !important; padding:10px !important } 
.item.w2 { width: 960px !important; }