css 的马赛克网格

Question

正在尝试制作响应式马赛克网格，它必须看起来像这样。 target grid mosaic

<div class="masonry grid clearfix">
        <div class="grid-item dbl-height"></div>
        <div class="grid-item mrg-on-left"></div>
        <div class="grid-item mrg-on-left dbl-width"></div>
        <div class="grid-item mrg-on-left mrg-on-top dbl-width middle-one"></div>
        <div class="grid-item mrg-on-left mrg-on-top dbl-height"></div>
        <div class="grid-item dbl-width pull-up-one bot-one"></div>
        <div class="grid-item mrg-on-left pull-up-one bot-one"></div>
</div>

这是 scss

    .grid {
    padding: 1px 0px;
}
.grid-item {
    padding-bottom: calc(((100% - 2px)/4));
    width: calc(((100% - 2px)/4));
    float: left;
    background: violet;
    &.dbl-height {
        padding-bottom: calc(((100% - 2px)/4)*2);
        &.right-one {
            padding-bottom: calc((((100% - 2px)/4)*2) - 1px);
        }
    }
    &.dbl-width {
        width: calc(((100% - 2px)/4)*2);
    }

    &.mrg-on-left {
        margin-left: 1px;
    }
    &.mrg-on-top {
        margin-top: 1px;
    }
    &.middle-one {
        padding-bottom: calc(((100% - 2px)/4) - 1px);
    }
    &.pull-up-one {
        margin-top: calc(((100% - 2px)/(-4)));
    }
    &.bot-one {
        padding-bottom: calc(((100% - 2px)/4) - 1px);
    }
}

如果你看，最后两个网格项有 class 'bot-one'。我已经使这个浮动并使用 'padding-bottom' 技巧，以达到纵横比的块。

但是达不到效果....最后2个方块没有堆叠在正确的位置...这里有什么问题吗？

Answer 1

首先，看看你的最后三个区块：

    <div class="grid-item mrg-on-left mrg-on-top dbl-height"></div>
    <div class="grid-item dbl-width pull-up-one bot-one"></div>
    <div class="grid-item mrg-on-left pull-up-one bot-one"></div>

根据规范，参见规则 2(https://www.w3.org/TR/CSS21/visuren.html#float-rules):

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

现在，请看最后三个 div，您的倒数第三个块将让其后面的元素放置在第四行中。

倒数第二个div使用margin-top得到一个负数，与它的高度相同(padding-bottom)，这导致它流出(第四行) ).

最后一个 div 无法获得倒数第二个 div 的右外边缘，因此它使用倒数第三个，这导致它与倒数第二个 div 重叠。

（黑色部分是最后一个div）

快速修复（给倒数第二个元素添加边距底部）：https://jsfiddle.net/L0kove74/1/

参考：

css 的马赛克网格

mozaic grid with css

css

grid

masonry

mosaic