0
319
Vistasaligning images in React JS side by side using CSS map method
To align images side by side that are written using map method in React JS and CSS To align images side by side that are written using map method in React JS and CSS To align images side by side that are written using map method in React JS and CSS
before:
import React from 'react'
import HomeFooterImages from "./HomeFooterImages";
const HomeFooterDetails = () => { //landing page footer images not wokring
return (
<div className="home5Main">
{
HomeFooterImages.map((curElem) =>
{
return (
<div className="home5Main1">
<img className="home5Main1Img" src={curElem.img} />
</div>
)
})
}
</div>
)
}
export default HomeFooterDetails;
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
For following results
Add following CSS:
.home5Main {
margin-top: 5%;
border: 2px solid grey;
width: 100%;
height: 400px;
}
.home5Main1Img {
float: left;
width: 13%;
height: auto;
}
·
Juan Pablo Isaza
Denunciar
0
You Should use FlexBox for this scenario. Bydefault direction of flex will be row-wise.
.home5Main1 {
padding:"5px";
}
.home5Main1Img{
width: "200px";
height: "400px";
}
.home5Main {
display:"flex";
width:"100%"
}
·
Juan Pablo Isaza
Denunciar
0
Code Solution:https://codesandbox.io/s/sharp-kare-np3e0?file=/src/App.js
import "./styles.css";
import { ImagesElement } from "./HomeFooterImages";
export default function App() {
return (
<div className="home5Main">
{ImagesElement.map((curElem) => {
return <img className="home5Main1Img" src={curElem.img} />;
})}
</div>
);
}
.home5Main {
display: flex;
justify-content: space-evenly;
}
explanation: You are returning home5Main1 div for HomeFooterImages map function since you rendering div(which is block element) images will come one below the other. In my code, I am only returning images from map function which works and used flex just add little spice to it
·
Juan Pablo Isaza
Denunciar
Responde la pregunta