Question

尝试制作响应式mozaic网格，必须看起来像这样。 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＆＃39;。我已经让它漂浮并使用了填充底部＆＃39;技巧，达到纵横比的块。

然而无法达到效果....最后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）：

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

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

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

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

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

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

参考：Negative margin breaks float

与css的mozaic网格

1 个答案: