Question

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

我觉得它工作得很好但是当一个块出现时，我无法正确地让下一个块适合它。

我已经包含了一个jsfiddle来使问题更加清晰。您将看到在输出的底部，在特征元素右侧的一行上有一个块（具有类'问题'）。我希望这可以在特色块的左侧和当前的同一行上，这样我就可以添加另外两个块来创建一个完整的网格，但我无法弄清楚如何。

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

非常感谢任何帮助。

Answer 1

从技术上讲，这称为Dynamic Grid Layout

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

网上有现成的插件。

您可以在此处查看或下载演示：

Reference 1:

Reference 2:

网格中的CSS Float问题

1 个答案: