Javascript 使用两种类型的瓷砖进行布局

有没有办法用纯CSS或CSS+LittleJS制作这种布局？（单击我的头像放大参考图像=） 我尝试使用浮动和显示选项没有成功<代码>请参见

瓷砖将用于图像和iFrame

p、 使用外部代码（如砌体或同位素）在这里不合适。

一种方法是：

    #container {
        max-width: 860px;
        margin: 0 auto;
        height: 100%;
        height: 100%;
    }
    .block {
        width: 23%;
        height: 200px;
        background: #ccc;
        margin: 10px 1%;
        float: left; 
        outline: 1px solid red;
    }
    .block:nth-of-type(3) {
        clear: left;
    }
    .block:nth-of-type(5) {
        float: right;
        width: 48%;
        height: 420px;
        margin-top: -210px;
    }

    @media screen and (max-width: 640px) {
        .block:nth-of-type(3) {
            clear: none;
        }
        .block:nth-of-type(5) {
            float: left;
            width: 23%;
            height: 200px;
            margin-top: 10px;
        }
    }

因为看起来你想适应不同的屏幕尺寸，我把宽度改成了百分比，使它更具响应性。显示结果

如果你不想让积木5向右浮动，你可以绝对定位它

---

我希望您能根据自己的需要调整基本想法。

以下是@bobdye分享想法后我如何解决问题的方法。 最后的代码（JSFIDLE）是： 溶液分4步出现：
（1）。使用

float设置大块样式：右
（2）<代码>清除

第二个小块的浮动
（3）。在3-cloumn布局中，为大的块设置负

边距

（4）。对@media查询进行一些调整。

---

希望这能帮助其他人=）

你的头像有一个大块和一堆小块。大块头是另一种类型吗？你的小提琴只有一种方块，这是正确的。一个大街区和12个小街区。也许是因为@media，你看不到那个大的。如果将视口宽度设置为大于640px，您将看到它。希望这会有帮助。谢谢你的帮助@bobdye。你给了我解决问题的钥匙。我将在单独的帖子中发布我的解决方案。干杯