CSS: How to split images into lines?

Question

I want to create a photo album with lines of images. Currently, all my images appear on one line. Say, if I upload 15 images, what is CSS code to split them into 3 lines .. 5 images in each line? Sorry, this is probably very simple, but I'm new to CSS. This is the code that I am currently using.

EDIT: Here is another piece of code. I am not sure if this is a container.

.flickr-photoset-img{ float: left; } .flickr-photoset-box { padding: 10px; float: left; text-align: center; width: 130px; height: 130px; } 

Answer 1

The easiest way is to limit the size of the container.

 .container { width: 500px; /* look i'm now showing 5 images per line */ } .img { /* height: 100px; width: 100px; */ float: left; } <div class="container"> ... <img ...> <img ...> <img ...> <img ...> <img ...> <img ...> <!-- I will wrap to a new line --> ... </div> 

Example here

After reading briefly about Flicker and Drupal - I think the css class you want to change is flickr-photoset

 .flickr-photoset { width: 500px; /* really you can set this to whatever */ } 

Answer 2

First of all, you should perhaps div to wrap your images.

It is important to know that your images will automatically go to the next line if the sum of your images is greater than the width with their wrapper div.

For example, if you have a 600px wide wrapping div and four images with a size of 250px in width, they will be listed in two lines .

Here you can find a tutorial that explains what you need to do for your gallery.

Answer 3

You can do this by placing the <br /> tag after the fifth image. With CSS, you can add a style similar to this.

 CSS .images{ float:left } .clear{ clear:both } HTML <img class=images ... /> <img class=images ... /> <img class=images ... /> <img class=images ... /> <img class=images ... /> <img class=clear ... /> <img class=images ... /> <img class=images ... /> <img class=images ... /> <img class=images ... /> <img class=clear ... /> <img class=images ... /> <img class=images ... /> <img class=images ... /> <img class=images ... />