reactjs - horizontal row of png images in container

user_18466946 0
Viewed 49

I am trying to add some small .png icons in a horizontal row in a main container. I am struggling to figure out the easiest way to go about doing this

Here is a code sandbox of what I have created so far https://codesandbox.io/s/broken-dew-76c4rf

I have been struggling with this for a while now and I cannot seem to get it. I have tried creating a div, inserting tags in the div but I don't think this is correct. Any help is greatly appreciated!

css
2 Answers

Just set the style from the div with the images to display: 'flex', flex-direction: 'row'

user_133893220

Do like this

First import the img_path at the top

import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";

Then define a div with style flex flex-direction:row like this

            <div className="img-container">
              <div className="img">
                <img src={imgurl1} alt="aws" />
              </div>
              <div className="img2">
                <img src={imgurl2} alt="c" />
              </div>
              <div className="img3">
                <img src={imgurl3} alt="java" />
              </div>
            </div>

and style like this

.img-container {
  display: flex ;
  flex-direction: row ;
}
.img1, .img2 ,.img3 {
  /* any style for  the images */ 
  background-color: black;
}
Admin1
Related