Reactjs - горизонтальный ряд изображений png в контейнере
Я пытаюсь добавить несколько небольших значков .png в горизонтальный ряд в основном контейнере. Я изо всех сил пытаюсь понять, как проще всего это сделать
Вот песочница кода того, что я создал до сих пор https://codesandbox.io/s/broken-dew-76c4rf
Я боролся с этим некоторое время, и я не могу понять. Я попытался создать div, вставив теги в div, но я не думаю, что это правильно. Любая помощь приветствуется!
Могу ли я настроить все изображения так, чтобы они были одинакового размера во флексбоксе, или мне нужно сделать это для каждого из них отдельно?
@aaty Обновлено в вашем коде codeandbox.io/s/хорошая вода-k35yh3
Ответы 2
Просто установите стиль из div с изображениями на display: 'flex', flex-direction: 'row'
мне просто добавить все изображения в div, используя отдельные теги <img/>?
да я бы сделал так.
Делай так
Сначала импортируйте img_path вверху
import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";
Затем определите div со стилем flex flex-direction:row вот так
<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;
}
используйте css flex, проверьте это: freecodecamp.org/news/an-animated-guide-to-flexbox-d280cf6afc35