我怎么能得到浮动的imgs来填补所有空间

Question

我有一些图片宽度固定大小。我希望它们像网格一样填满，如下：

但反过来会发生这种情况：

如何让它们填满所有东西？

HTML：

<div id="product-pics">
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/566x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x566.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/282x282.png" alt="" class="tile" />
    <img src="img/dummy/566x282.png" alt="" class="tile" />
</div>

的CSS：

.tile {
    margin: 1px;
    float: left; /* to remove the 4px gap between images */
}

Answer 1

在这种情况下，您需要更改HTML中的顺序。先放282x566，然后只放一个右边的那个。其余部分浮动到左侧，它应该可以工作。

DEMO

重新排列 HTML ：

<div id="product-pics">
    <img src="img/dummy/282x566.png" alt="282x566" class="tile double-h right" />

    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />

    <img src="img/dummy/566x282.png" alt="566x282" class="tile double-w" />
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" />
</div>

相关的 CSS ：

#product-pics { width: 852px; }
.tile {
    float: left;
    width: 282px;
    height: 282px;
    margin: 0 2px 2px 0;
}
.right { float: right; }
.double-h { height: 566px; }
.double-w { width: 566px; }

Answer 2

您需要使用JavaScript来执行此操作。有一个很棒的插件叫Masonry，可以生成你想要的布局。 Masonry使用jQuery，但是有一个Vanilla Masonry端口没有。

您遇到的问题是浏览器首先将页面水平放置，然后垂直放置。砌体改变了这一点并在列中创建了一个布局。

此布局也可以使用CSS3 columns生成，但浏览器支持不是很好（IE10 +，其他现代浏览器）。

Answer 3

使用CSS Class而不是IMG标记，并在第一个图像的示例下面重复图像

.tile1 {
background:url('img/dummy/282x282.png') repeat top left;
width:100%; /* based on your area */
height:500px; /* based on the image height*/
}

同时检查CSS中可用的不同“重复”选项。