CSS中的马赛克图像库

Question

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

你能指导我吗？

我见过this example，但我不明白如何实现它。

以下是我需要的示例：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%;
}