布局有 2 种类型的瓷砖

Question

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

图块将用于图像和 iframe。

p.s。使用外部代码（如 Masonry 或 Isotope）在这里不合适。

Answer 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 右浮动，可以绝对定位。

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

Answer 2

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

希望这会帮助其他人 =)

布局有 2 种类型的瓷砖

Layout with tiles of 2 types

javascript

css

layout

responsive-design