css - 带有 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”。我已经使这个 float 并使用“填充底部”技巧，以达到具有纵横比的 block 。

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

Answer 1

首先，看看你的最后三个区 block :

    <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，倒数第三个 block 将让其后面的元素放置在第四行中。

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

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

(黑色部分是最后一个div)

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

引用:Negative margin breaks float