网格内的CSS浮动问题答案

【问题标题】：CSS Float issue within grid网格内的CSS浮动问题
【发布时间】：2014-10-11 10:41:17
【问题描述】：

我的目标是使用 css 浮点数创建一个简单的图像网格，其中某些“特色”块的大小是其他块的两倍。

我的大部分工作都很好，但是当一个块出现时，我无法让下一个块正确地放在它下面。

我已经包含了一个 jsfiddle 以使问题更加清晰。您会看到，在输出的底部，在特征元素右侧的一行中存在一个块（类为“问题”）。我希望它位于特色块的左侧，并且与当前位于同一行，这样我就可以添加另外 2 个块来创建一个完整的网格，但我不知道怎么做。

CSS：

.grid {
    ul {
        padding: 0;
        margin: 0;
        width: 100%;
        li {
            width: 20%;
            float: left;
            list-style: none;
            box-sizing: border-box;
            white-space: nowrap;
            list-style: none;
            line-height: 0;
            img {
                width: 100%;
            }
        }
    }
    .featured {
        width: 40%;
    }
}

（嵌套css是由于scss）。

完整的小提琴：Link

非常感谢任何帮助。

【问题讨论】：

将要素类添加到您的 .g1 而不是 .g2
使用浮点数可能无法解决。我建议像 masonry.js 这样的 JS 解决方案

标签： css sass css-float

【解决方案1】：

技术上称为Dynamic Grid Layout

根据您的要求，您必须在此处使用 jquery，因为仅使用 css 和 html 没有可靠的解决方案。

网上有现成的插件。

您可以从这里查看或下载演示：

Reference 1:

Reference 2:

【讨论】：