How to insert 5 pictures next to eachother in a row

Question

I have 5 pictures:

Pic 1:https://www.url.se/1
Pic 2:https://www.url.se/2
Pic 3:https://www.url.se/3
Pic 4:https://www.url.se/4
Pic 5:https://www.url.se/5

The size of each picture is:

Pic 1: 70x40
Pic 2: 80x42
Pic 3: 90x44
Pic 4: 100x46
Pic 5: 120x48

I want to insert these pictures next to eachother, in one row. I also want to be able to adjust the distance between these pictures in the CSS, also the top and bottom boarder.

How do I create a div class and paste this code to display these pictures on a page? Also how does the CSS look for this div class in which I can adjust the distance between images and also distance of top and bottom boarder

the distance is adjusted by `margin: ?` which will give space from all directions ,to have the images in one row ,group them in one div and give that div a width, this should work. — ctf0, Jan 13 '15 at 07:18
I am not so familiar with how to write it, could you help me on how to do that? The CSS and the code. Thank you — Joneskvist, Jan 13 '15 at 07:21
can u post the html code ,it will be easier to understand with. — ctf0, Jan 13 '15 at 07:22
Hi, I have got an answer below which is pleasing. Thank you for your time. — Joneskvist, Jan 13 '15 at 07:28
A div with floating images inside /w variable margin. That's all he is trying to achieve. — Mysteryos, Jan 13 '15 at 07:28

Gildas.Tambo · Accepted Answer · 2015-01-13T07:35:02.810

You can use display: inline or float: left

display: inline

*{box-sizing: bortder-box}  /*lang-css*/

figure{
  width: 100%;
}
img{display: inline; margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
img:first-child{width: 70px; height: 40px}
img:nth-child(2){width: 80px; height: 42px}
img:nth-child(3){width: 90px; height: 44px}
img:nth-child(4){width: 100px; height: 46px}
img:last-child{width: 120px; height: 48px}

<figure> <!--lang-html-->
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</figure>

float: left

*{box-sizing: bortder-box}  /*lang-css*/

figure{
  width: 100%;
}
img{float: left; margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
img:first-child{width: 70px; height: 40px}
img:nth-child(2){width: 80px; height: 42px}
img:nth-child(3){width: 90px; height: 44px}
img:nth-child(4){width: 100px; height: 46px}
img:last-child{width: 120px; height: 48px}

<figure> <!--lang-html-->
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</figure>

You need to add text-align: center on the parent tag if you want it to be on centered

*{box-sizing: bortder-box}  /*lang-css*/

figure{
  text-align: center;
  width: 100%;
}
img{margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
img:first-child{width: 70px; height: 40px}
img:nth-child(2){width: 80px; height: 42px}
img:nth-child(3){width: 90px; height: 44px}
img:nth-child(4){width: 100px; height: 46px}
img:last-child{width: 120px; height: 48px}

<figure> <!--lang-html-->
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</figure>

Thank you very much for the help. Which of the parts above goes for the css, is it the first part? And the second part is where the code is pasted? Could you please explain the text-align:center part and why I need to add it? — Joneskvist, Jan 13 '15 at 07:27
@Joneskvist please read the comments inside the code. and you can read more by searching on SO ie: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell — Gildas.Tambo, Jan 13 '15 at 07:32
@Joneskvist You are welcome. you can type this in google too `float vs display inline css :stackoverflow.com` or `float vs display inline css site:stackoverflow.com`. — Gildas.Tambo, Jan 13 '15 at 07:37
Sure are you using `classes` or on `iD` on the parent in this case `figure`? probably not. — Gildas.Tambo, Jan 15 '15 at 19:29
I did a smal modification. I added **#footer-images** in front of **img:** in the css and now it works :) — Joneskvist, Jan 15 '15 at 19:34
Ahhh awsome, that site is very helpful :) Is the modification you did exactly like mine? — Joneskvist, Jan 15 '15 at 19:40

How to insert 5 pictures next to eachother in a row

1 Answers1