2种瓷砖的布局答案

【问题标题】：Layout with tiles of 2 types2种瓷砖的布局
【发布时间】：2015-02-06 05:43:36
【问题描述】：

有没有办法用纯 CSS 或 CSS + little JS 做出这种布局？（点击我的头像放大参考图片=）我尝试使用浮动和显示选项没有成功。 See http://jsfiddle.net/vdk2wns1/1/

Tiles 将用于图像和 iframe。

附言此处不适合使用外部代码（如 Masonry 或 Isotope）。

【问题讨论】：

你的头像有一个大块和一堆小块。大块是另一种类型吗？您的 Fiddle 只有一种类型的块。
没错。一大块和十二个小块。可能是因为@media，您看不到那个大的。如果您将视口宽度设置为大于 640 像素，您会看到它。希望这会有所帮助。

标签： javascript css layout responsive-design

【解决方案1】：

一种方法是：

    #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;
        }
    }

由于您似乎想适应不同的屏幕尺寸，我将宽度更改为百分比以使其具有响应性。 This Fiddle 显示结果。

如果您不想向右浮动 Block 5，您可以绝对定位它。

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

【讨论】：

感谢您的帮助@bobdye。你给了我解决问题的钥匙。我将在单独的帖子中发布我的解决方案。干杯。

【解决方案2】：

@bobdye 分享了他的想法后，我如何解决我的问题。最终代码（jsfiddle）为：Here 解决方案分 4 个步骤出现：
(1)。使用float: right;
(2) 设置大块样式。 clear 第二个小块的浮动；
(3).在 3 列布局中为大块设置负 margins；
(4)。对@media 查询进行一些调整。

希望这对其他人有帮助=)

【讨论】：