html - 具有可变大小和定位元素的 2 列响应式布局

Question

我想实现这种响应式布局，它也能以正确的顺序放置 block 。如果您使用网格并且只让整个右列在左下方作为一个列，这很容易，但我想让单个 block 以正确的顺序分布。

这是它在大屏幕(2 列)上的显示方式:

下面是它在较小屏幕(1 列)上的显示方式:

block 对齐:

• 1 & 4 = 左边
• 2 & 3 = 右
• 5 & 6 = 居中

所有 block 都有不同的宽度和高度(随机)，我想实现这种定位 - 再一次 - block 顺序很重要。(大屏的列宽都是一样的。。我画的有点快)

我已经尝试使用不同的 HTML 和 CSS 标记来实现这一点，但每次都失败了。我还尝试了对 DOM 中的框重新排序的 javascript，但遇到了问题，因为有些框还包含其他 javascript 和代码，这些代码在修改 DOM 后无法执行。

所以我正在寻找一个最简单的解决方案，如果可能的话，最好只使用 html+css，不使用 javascript。

Answer 1

使用 Masonry 进行管理。

HTML:

<div id="wrapper">
    <div style="margin-top:0px; text-align: left"><div style="width:70%;height: 200px">1</div></div>
    <div style="margin-top:50px; text-align: right"><div style="width:80%;height:170px">2</div></div>
    <div style="margin-top:50px; text-align: right"><div  style="width:60%">3</div></div>
    <div style="margin-top:50px; text-align: left"><div  style="width:40%; height:150px">4</div></div>
    <div style="margin-top:50px; text-align: center"><div  style="width:60%">5</div></div>
    <div style="margin-top:50px; text-align: center"><div  style="width:80%;height:100px">6</div></div>
</div>

CSS:

    #wrapper {
        width: 100%;
        max-width: 800px;
    }

    #wrapper > div {
        width: 40%;
        max-width: 350px;
    }

    #wrapper > div > div {
        display: inline-block;
        text-align: center;
        padding: 50px 0;
        background: #000;
        color: #fff;
    }

Javascript(使用 jquery):

$(document).ready(function() {
    $("#wrapper").masonry({
                         columnWidth: 380,
                          gutter: 20
                          });
});

示例可以在 http://jsfiddle.net/sinusiks/w99te/4/ 找到