2

我正在使用 Susy 网格。我需要制作一个具有交替宽度的块库。它们将是 1/3、2/3 和 3/3 宽度的块。一个页面上可以有许多这样的块，它们可以随机排列。如果一个块不适合单行，它必须跳到下一行。

<div class="gallery"
    <div class="item1of3">...</div>
    <div class="item1of3">...</div>
    <div class="item1of3">...</div>
    <div class="item2of3">...</div>
    <div class="item1of3">...</div>
    <div class="item3of3">...</div>
    <div class="item1of3">...</div>
    <div class="item2of3">...</div>
    <div class="item2of3">...</div>
</div>

下一个代码没有帮助......

.item1of3 {
    @include gallery(1 of 3);
}

.item2of3 {
    @include gallery(2 of 3);
}

.item3of3 {
    @include gallery(3 of 3);
}

因为画廊 mixin 仅适用于相同的元素。 http://codepen.io/inliner/pen/YXWRRP

那么这实际上可能吗？

我需要这样的东西 - http://codepen.io/anon/pen/vOKQbx 但是用正确的方法来处理边距。块必须在容器内对齐。

4

1 回答 1

0

任何你可以用 CSS 做的布局，你都可以用 Susy 做。不过，在这种情况下，我不知道有什么好的 CSS 浮动解决方案可以让您随机排序、对齐的边缘、中间的排水沟和流动的宽度。不过，您可以使用 flexbox 来做到这一点：

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item1of3 {
  flex: 0 0 span(1 of 3);
}

.item2of3 {
  flex: 0 0 span(2 of 3);
}

.item3of3 {
  flex: 0 0 span(3 of 3);
}

如果您需要使用浮点数，最接近的是 with insideor splitgutters：

.item1of3 {
    @include span(1 of 3);
}

.item2of3 {
    @include span(2 of 3);
}

.item3of3 {
    @include span(3 of 3);
}

但效果略有不同。内部排水沟会给你理由，但不是元素之间的空间。分开的排水沟将为您提供空间，但也为边缘提供一些空间。如果一切都是静态宽度，您也许可以做一些带有负边距的事情.gallery来移除边缘排水沟。

于 2015-05-20T16:42:02.880 回答