Question

我需要制作网站布局，其中我有块＃34;常规尺寸＆＃34;和＆＃34; 2x2常规尺寸＆＃34;块和他们应该安排好，不管我放大哪里和我放小块。例如，如果我在下面的图片中有这样的情况，我需要块8低于5，块9将紧邻8（低于块6），依此类推。

图片：http://i.stack.imgur.com/epWJo.png

到目前为止，这是我的CSS：

    .block
{
    float: left;
    display: inline-block;
    margin: 3px;
    width: 141px;
    height: 150px;
    border-style: solid;
    background: lightgray;
    border-width: 1px;
}

.block4
{
    float: left;
    display: inline-block;
    margin: 3px;
    width: 294px;
    height: 308px;
    border-style: solid;
    background: lightgray;
    border-width: 1px;
}

你能帮我解决一下这个问题吗？

谢谢

Answer 1

Isotope或jQuery Masonry适用于你想要的东西

http://isotope.metafizzy.co/

http://masonry.desandro.com/

Answer 2

除非您想将1/4大小的块放入容器中，否则无法完成。这样容器向左浮动，然后包含4个较小的块。或者你可以像其他人所说的那样使用jQuery Masonry。

安排不同大小的div块

2 个答案: