javascript - 使用 CSS map 方法并排对齐 React JS 中的图像

Question

在 React JS 和 CSS 中并排对齐使用 map 方法编写的图像 在 React JS 和 CSS 中并排对齐使用 map 方法编写的图像 在 React JS 和 CSS 中并排对齐使用 map 方法编写的图像CSS

前：

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;

标签： javascripthtmlcssreactjs

Answer 1

代码解决方案：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;
}

解释：您正在为 HomeFooterImages 地图功能返回 home5Main1 div，因为您渲染 div（这是块元素）图像将在另一个下方。在我的代码中，我只从 map 函数返回图像，该函数有效并使用了 flex 只是为它添加了一些香料