石工：使用2列布局時，我如何比另一列寬1列？

Question

因此，我嘗試創建2列砌體布局，如下所示： http : //i.stack.imgur.com/gq6LJ.png

我不確定如何使其自動工作，例如，不必在每個網格項目上設置特定的寬度。

由於我只是遍歷文章，因此它們都沒有設置特定的寬度。 我只需要右邊的寬度為60％，左邊的寬度為30％。

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <article class="grid-item">
      <!-- Content -->
  </article>
</div>

這是我嘗試使其工作的一個代碼筆。

石工甚至有可能嗎？

也許還有另一個網格庫？

Answer 1

不，根據我的閱讀，Masonry並非打算像您想要的那樣生產固定大小的單列物品...

我將使用jquery獲取窗口寬度，並按如下方式將該寬度的百分比分配給您的容器元素...

$(document).ready(function(){
    var cWidth = $(window).width() * .7; // 70% or whatever you want
    cWidth.toFixed(0);
    $('#container').width(cWidth);

    $( window ).resize(function() {
        var crWidth = $(window).width() * .7; // 70% or whatever you want
        crWidth.toFixed(0);
        $('#container').width(crWidth);
    });
});

然后像這樣在CSS中設置子元素的（列）寬度。

.left-column {
    width: 35%;
}

.right-column {
    width: 65%
}