砌体中的布局未按预期将图像调整为列

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