2

I want to make a mosaic gallery with pure CSS, but I can't think of the "logic-side", I need a practical example.

Can you guide me?

I have seen this example, but I don't understand how to achieve it.

Here is an example of what I need: http://tmv.proto.jp/

I would like a non-jQuery solution.

Community
  • 1
  • 1
Guilherme Oderdenge
  • 77
  • 2
  • 3
  • 9

1 Answers1

3

First, make some divs to serve as columns. Then you use css to give them all a width (percent for fluid, px for fixed) and float them left. Second, give all your images a width of 100% in css and distribute them among the columns.

Example (untested):

HTML:

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

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

CSS:

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

img{
    width:100%;
}
John Stimac
  • 5,335
  • 8
  • 40
  • 60
  • Hello, Jcubed! Thank you for your entry. It works! But, if possible, you can tell me the logic to apply this on a foreach(php)? If I have the correctly logic, I can make the code. – Guilherme Oderdenge Jul 22 '11 at 04:28
  • foreach(images as i=>image){ divs[i%Number_Divs][]=image; } Then echo out the divs using another foreach. Hope that helps. – John Stimac Jul 22 '11 at 06:56