css - reactjs - 容器中的水平行 png 图像

Question

我正在尝试在主容器的水平行中添加一些小的 .png 图标。我正在努力找出最简单的方法来做到这一点

这是我到目前为止创建的代码沙箱 https://codesandbox.io/s/broken-dew-76c4rf

我已经为此苦苦挣扎了一段时间，但我似乎无法理解。我试过创建一个 div，在 div 中插入标签，但我认为这是不正确的。非常感谢任何帮助!

Answer 1

这样做

首先导入最上面的img_path

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

然后像这样定义一个样式为 flex flex-direction:row 的 div

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

这样的风格

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