Adjust alignment of images in rows (ala Google Images)

Question

I would like to justify images by a fixed width (as Google images do, for example: here )

Are there any simple solutions for this?

The last resort would be to write a jquery script that calculates the number of images that it can insert into the string, and iterates separately through the images. It seems like something redundant for something that can be done with text-align: justify ...

Answer 1

Use display: built-in block; for elements with images and text alignment: justify; for the parent element. Example:

<ul class="images"> <li><img src="..."/></li> ... </ul> 

and CSS:

 .images{text-align: justify;} .images li{display: inline-block;} 

Answer 2

If you are looking for a powerful tool to justify images at a fixed width, this jQuery plugin can help you: https://github.com/brunjo/rowGrid.js

Demo

Answer 3

Make sure you specify an external container by specifying a div or fixed-width section, and try to place the image container inside it to achieve this.

 <div id="outer-container" style="width:800px;height:400px;"> <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;"> <img src="your_image_src" width="100" height="100"/> </div> <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;"> <img src="your_image_src" width="100" height="100"/> </div> <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;"> <img src="your_image_src" width="100" height="100"/> </div> </div> 

You can use display: inline-block instead of float: left to achieve it.but display: the inline block can be used based on your situation.

Answer 4

In the long run, he will have many problems that are initially unthinkable. Check out my Rich Grid plugin (do a Google search). I did my best to reproduce how flickr shows it with dynamic row height and minimal cropping.