Question

我正在使用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);
}

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

实际上可能吗？

我需要这样的事情 - http://codepen.io/anon/pen/vOKQbx 但是以正确的方式处理利润率。必须在容器内对齐块。

Answer 1

你可以用CSS做任何布局，你可以用Susy做。但是，在这种情况下，我不知道任何好的CSS浮点解决方案可以让您获得随机排序，对齐边缘，间隙和流体宽度。不过你可以do it with flexbox：

public override void UpdateLog(string emailId)
{
    using (Stream s = File.OpenWrite(logFile))
    {
        using (StreamWriter writer = new StreamWriter(s))
        {
            writer.Write(emailId);
        }
    }
}

如果您需要使用花车，那么您最接近的就是使用.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); }或inside排水沟：

split

但效果略有不同。里面的排水沟会给你理由，但不是元素之间的空间。分开的排水沟将为您提供空间，但边缘也有一些空间。如果一切都是静态宽度，您可以在.item1of3 { @include span(1 of 3); } .item2of3 { @include span(2 of 3); } .item3of3 { @include span(3 of 3); }上执行带有负边距的操作来移除边缘装订线。

Susy画廊与替代宽度元素

1 个答案: