0
320
Viewsaligning 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 answers
Answer question0
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
Report
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
Report
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
Report
Answer question