Limit the number of images in a row?
I have a set of images that I want to show where they are stored in my database, how related, where each image has thumbs up, now I used a limit
query to show a small number of images that the user needs to navigate to another. my question is how can i order these images where 4 images per row and 3 columns
+2
a source to share
2 answers
HTML:
<div id="image_container">
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
...
</div>
CSS
#image_container { width:440px; overflow:hidden; }
#image_container img { width:100px; margin:5px; float:left; display:inline; }
You may need to adjust the dimensions; this is a general concept.
+2
a source to share
If all images are the same width, make the container wide enough for 4 images and place the remaining images
Otherwise, scroll through the images and use the modulus operator to check which image is in the row you are in. If you are in the image that should be the first in the line, you can clear the floats in that image.
+1
a source to share