0

试图制作一个响应式的马赛克网格，它必须看起来像这样。 目标网格马赛克

<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块没有堆叠在正确的位置...这里有什么问题？

4

1 回答 1

0

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

    <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，这会导致它流出（第四行）。

lastdiv无法获得 second-last 的右外边缘，div因此它使用 third-last ，这导致它与 second-last 重叠div。

重叠 （黑色部分为最后div）

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

参考：负边距打破浮动

于 2016-06-14T03:02:10.967 回答