I am trying to build an image portfolio that scrolls vertically, with 5 images in each row. As of now, each image has a width of 188px, with a 15px gap between each image. Totals to 1000px, the width of the container. So far this is working, but I have to make it so that each image will align itself to the image above it. It is very hard to explain, so here is a picture: http://i45.tinypic.com/1eq6o2.png
Here's the code as of now:
CSS:HTML Code:<div class="photos"> <img src="pics/pic1.jpg" /> <img src="pics/pic4.jpg" /> <img src="pics/pic2.jpg" /> <img src="pics/pic4.jpg" /> <img src="pics/pic3.jpg" /> <img src="pics/pic2.jpg" /> <img src="pics/pic3.jpg" /> <img src="pics/pic4.jpg" /> <img src="pics/pic1.jpg" /> <img src="pics/pic2.jpg" /> </div>
If you could help me out, I would really appreciate it. Thanks!Code:.photos img:nth-child(5n) { margin:0 0px 15px 0; padding:0; } .photos img { margin:0 15px 15px 0; padding:0; width:188px; float:left; }


Reply With Quote
Bookmarks