代码之家 › 专栏 › 技术社区 › hwkal

如何在React js中呈现两行映射的迭代项

tailwind-ui tailwind-css reactjs

0

hwkal · 技术社区 · 1 周前

//assets.js
import sorare from './sorare.svg'
import visa from './visa.svg'
import sling from './sling.svg'
import safety_wing from './safety-wing.svg';
import unqork from './Un_qork.svg';
import stitch from './stitch.svg'
import xp from './X_P.svg'
import overwolf from './overwolf.svg'
import revio from './revio.svg'
import humaans from './humaans.svg'

export const companies = [
Â  Â  sorare,
Â  Â  visa,
Â  Â  sling,
Â  Â  safety_wing,
Â  Â  unqork,
Â  Â  stitch,
Â  Â  xp,
Â  Â  overwolf,
Â  Â  revio,
Â  Â  humaans,
]

//CompaniesMain.jsx
import {companies} from '../assets/assets'

const CompaniesMain = () => {
Â  return (
Â  Â  <div className='flex p-10 w-[100%]'>
Â  Â  Â  Â  {companies.map((company,index)=>{
Â  Â  Â  Â  Â  Â  return <img key={index} className='w-[15rem]' src={company} alt="" />
Â  Â  Â  Â  })}
Â  Â  </div>
Â  )
}

export default CompaniesMain

我想在两行中用相等的列迭代这些图像。如何做到这一点。如果可能的话,显示我使用顺风css。

我迭代图像,它们在一行中渲染。并且当在一行中显示时,图像的大小也没有增加

但我想这样给他们看

1 回复 | 直到 1 周前

1

Wongjn 1 周前

您可以考虑使用 CSS grid 通过应用 display: grid 通过 grid Tailwind class 。通过 grid-cols-5 Tailwind class 。可选地,通过应用 gap 通过 gap-* Tailwind class .

const companies = Array(10).fill().map((_, i) => `https://picsum.photos/500/300?${i}`);

const CompaniesMain = () => {
Â  return (
Â  Â  <div className='grid grid-cols-5 gap-4 p-10 w-[100%]'>
      {companies.map((company,index)=>{
        return <img key={index} className='w-[15rem]' src={company} alt="" />
      })}
Â  Â  </div>
Â  )
}

ReactDOM.createRoot(document.getElementById('app')).render(<CompaniesMain/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app"></div>