Question

这里是一个jsfiddle http://jsfiddle.net/adsq4ygt/

<head>
    <title></title>
    <style>
        body {
            padding:0;
            margin:0;
        }
        .col-right, .col-left {
            width: 50%;
        }
        .col-left {
            float: left;
            clear: left;
            background: teal;
        }
        .col-right {
            float: right;
            clear: right;
            background: orange;
        }
        @media (max-width: 769px) {
            .col-left, .col-right {
                float: none;
                width: 100%;
            }
        }
        .a {
            height:300px;
        }
        .b {
            height: 150px;
        }
        .c {
            height:400px;
        }
        .d {
            height:150px
        }
        .e {
            height:250px
        }
        .f {
            height:350px
        }
        .f {
            height:450px
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="col-left a">A</div>
        <div class="col-right d">D</div>
        <div class="col-left b">B</div>
        <div class="col-right e">E</div>
        <div class="col-right f">F</div>
        <div class="col-left c">C</div>
        <div class="col-right g">G</div>
    </div>
</body>

使用我的自定义布局。它也响应，盒子垂直堆叠。纯CSS桌面版本存在问题 - 空白空间。我不认为我可以用纯CSS去除它们，所以我想使用同位素。

我一直在玩不同的设置，但无法通过Isotope实现这一目标。任何人都可以通过同位素选项来帮助我实现这一目标吗？你也可以修改标记/ CSS - 只要移动版看起来像现在一样它不是问题

由于

用同位素重新排序盒子

0 个答案: