html - 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%;
}