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>

Here is a codepen of my attempt at getting this to work.

这是否可以与砌体一起使用？

可能还有另一个网格库？

Answer 1

不，从我读过的内容来看，砌体并不打算像你想要的那样生产固定尺寸的单列物品......

我会使用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%
}

砌体：采用2列布局，如何使1列比另一列宽？

1 个答案: