带有 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);
    }
}

如果你看的话，最后两个网格项目的类是“bot-one”。我已将此浮动并使用“填充底部”技巧，以达到具有纵横比的块。

但是无法达到效果....最后 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)：

如果当前框是左浮动的，并且有任何左浮动的 由源文档中较早的元素生成的框，然后为 每个这样的早期框，或者当前框的左外边缘 必须在前一个框的右外边缘的右侧，或 它的顶部必须低于先前框的底部。类似的 规则适用于右浮动框。

现在，看看最后三个divs，你的倒数第三块会让它后面的元素放在第四行。

倒数第二个div 使用margin-top 有一个与其高度相同的负数（padding-bottom），这会导致它流出（第四行）。

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

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

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

参考：Negative margin breaks float