How to insert 5 pictures next to eachother in a row


Tags: html,css,image

Problem :

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



Solution :

You can use display: inline or float: left

  1. 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>

  1. 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>


    CSS Howto..

    How to let Materialize use classes for dropdowns and not ID's?

    How to adjust table or content in CSS when printing?

    How to use HTML classes and ID's

    How to create rounded shape by CSS

    How to pass parameters to css classes

    How to create round plus minus using css?

    How to align text flush with bottom of container using CSS?

    How to fix the css red notification bubble

    How to remove background from breadCrumb

    CSS question: How to fix several rendering issues on http://www.fareham.ac.uk

    CSS Dropdown menu: How to make absolute positioned sub nav line up perfectly

    How to convert a piece of CSS code to LESS css

    How to modify css in OpenERP 7?

    How to center two pieces of text using CSS and Bootstrap?

    How to add Button over image using CSS?

    How to change H3 color in bootstrap using CSS file

    How to stop shadow effect from moving using pure css?

    How can I have floated list items display their bullet in IE7?

    How to use CSS property position:fixed with top:50px and height:100%?

    How are CSS elements combined

    How to display a 100% width stripe in a CSS design using a fixed-grid blueprint?

    How to save css style after hover action

    How can I get the second line of text to hide and show on hover? CSS only

    how to center image + text in an li Element

    How can I set a specific border around an element?

    How to force a div to scale at 100% width of the current windows Browser

    How can I instantly stop a CSS animation on hover?

    css code how to put the navigation in the middle

    How to prevent inner text resizing in CSS Animation @keyframes?

    How to change button colors upon click (Javascript)?