CODEWITHSUNDEEP
css
Clement Ckh
Clement Ckh

Reputation: 191

CSS: How to break images into rows?

I want to create a photo album with rows of images. Currently all my images are appearing in one row. Say if I upload 15 images, what is the CSS code to break them into 3 rows .. 5 images on each row? Sorry this probably is really easy but I am a beginner in CSS. This is the code I am currently using.

EDIT: Here is another part of the code I am not sure if it is a container.

.flickr-photoset-img{ 
float: left; 
}

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

Upvotes: 4

Views: 17643

Answers (3)

rlemon
rlemon

Reputation: 17667

The easiest way would be to restrict the container size. 

.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 edit is flickr-photoset

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

Upvotes: 4

Muhammad Imran Tariq
Muhammad Imran Tariq

Reputation: 23352

You can do it with placing <br /> tag after fifth image. With CSS you can add style like 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 ... />

Upvotes: 1

Ionut
Ionut

Reputation: 2858

First of all you should probably have a div wrapping your images.

The important thing to know is that your images will automatically skip to the next row if the sum of your images widths exceeds the with of their wrapping div.

For example if you have a 600px wide wrapping div and four images each measuring 250px in width they will be listed in two rows.

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

Upvotes: 2

Related Questions