html - 我怎样才能让浮动 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 放在第一位，然后只浮动那个。让其余部分浮动到左侧，它应该可以工作。

演示

重新排列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 列生成，但是浏览器支持不是很好（IE10+，其他现代浏览器）。

Answer 3

使用 IMG 标签的 CSS Class insted 并重复图像，在第一个图像的示例下方，

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

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