reactjs - horizontal row of png images in container-CodePudding

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!

CodePudding user response：

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;
}

CodePudding user response：

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