0
327
Vistasalinear imágenes en React JS una al lado de la otra usando el método de mapa CSS
Para alinear imágenes una al lado de la otra que se escriben con el método de mapa en React JS y CSS Para alinear imágenes una al lado de la otra que se escriben con el método de mapa en React JS y CSS Para alinear imágenes una al lado de la otra que se escriben con el método de mapa en React JS y CSS CSS
antes de:
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;3 Respuestas
Responde la pregunta0
Para los siguientes resultados
Agregue el siguiente CSS:
.home5Main { margin-top: 5%; border: 2px solid grey; width: 100%; height: 400px; } .home5Main1Img { float: left; width: 13%; height: auto; }0
Debería usar FlexBox para este escenario. Por defecto, la dirección de flexión será por filas.
.home5Main1 { padding:"5px"; } .home5Main1Img{ width: "200px"; height: "400px"; } .home5Main { display:"flex"; width:"100%" }0
Solución de código: 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; }explicación: está regresando home5Main1 div para la función de mapa HomeFooterImages ya que las imágenes div (que es un elemento de bloque) aparecerán una debajo de la otra. En mi código, solo devuelvo imágenes de la función de mapa que funciona y usé flex, solo le agrego un poco de sabor.