Justify alignment of images in rows (ala Google Images)

Question

I'd like to justify images across a fixed width (exactly how google images does it, eg: here)

Is there a somewhat simple solution for this?

The last resort would be to write a jquery script that calculates how many images it can fit into a row and iterates individually through the images. Seems sort of overkill for something that can be accomplished with text using text-align:justify...

Answer 1

Use display: inline-block; for elements with images and text-align: justify; for 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 look for a powerful tool to justify images across a fixed width, this jQuery plugin may help you: https://github.com/brunjo/rowGrid.js

Demo