CSS 中的马赛克图片库

Question

我想用纯CSS制作一个马赛克画廊，但我想不出“逻辑方面”，我需要一个实际的例子。

你能指导我吗？

我看过这个示例，但我不明白如何实现它。

这是我需要的示例： http://tmv.proto.jp/

我想要一个非 jQuery 解决方案。

Answer 1

首先，制作一些 div 作为列。然后你使用 css 给它们一个宽度（百分比为流体，px 为固定）并将它们向左浮动。
其次，在 css 中为所有图像指定 100% 的宽度，并将它们分布在各列中。

示例（未经测试）：

HTML：

<div class='col'>
    <img />
    <img />
    <img />
</div>

<div class='col'>
    <img />
    <img />
    <img />
</div>

CSS：

.col{
    width:50%;
    float:left;
}

img{
    width:100%;
}