时间戳

首页 > 解决方案 > 如何让“内联”图像全部排成一行？

javascript - 如何让“内联”图像全部排成一行？

问题描述

我试图让图像占用尽可能少的空间。他们占用空间的原因似乎是因为我进行了 50% 的转换，但我希望剩余的空白不占用页面上的空间。

在第一行，如果不是全部 4 张，至少应该有 3 张钞票（5,50,100）的空间。

我怎样才能让它们都适合？

在此处输入图像描述

这是我的代码：

应用程序.css

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-float infinite 3s ease-in-out;
  }
}

.half-container {
  display: flex;
  flex-flow: row;
}

.left {
  display: flex;
  flex-flow: row wrap;
  width: 60%;
}

.right {
  width: 40%;
}
.App-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

.App-link {
  color: rgb(112, 76, 182);
}

@keyframes App-logo-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px)
  }
  100% {
    transform: translateY(0px)
  }
}

应用程序.js

import React from 'react';
import { useState } from 'react';
import logo from './logo.svg';
import { Counter } from './features/counter/Counter';
import './App.css';

import fifty from './img/fifty.png'
import five from './img/five.png'
import hundred from './img/hundred.png'
import loonie from './img/loonie.png'
import ten from './img/ten.png'
import toonie from './img/toonie.png'
import twenty from './img/twenty.png'


const randomInt = ( lo, hi ) => {
    return Math.floor( Math.random() * hi )
  }
const getRandomCash = () => {
  return {
    loonie: randomInt(0, 3),
    toonie: randomInt(0,3),
    five: randomInt(0,3),
    ten: randomInt(0,3),
    twenty: randomInt(0,3),
    fifty: randomInt(0,3),
    hundred: randomInt(0,3)
  }
}

const values = {
  loonie: 1,
  toonie: 2,
  five: 5,
  ten: 10,
  twenty: 20, 
  fifty: 50,
  hundred: 100
}

const images = { loonie, toonie, five, ten, twenty, fifty, hundred }

function App() {

  const [cash, setCash] = useState(getRandomCash());

  console.log(cash);

  let items = Object.keys(cash).map(
    key => Array(cash[key]).fill(key)
  ).flat()

  console.log(items);

  let imageDivs = items.map( item => {
    return (
      <div style={{width:'auto', height:'auto'}}>
      <img style={{transform:'scale(0.5)'}} src={images[item]} alt="" >
      </img>
      </div>
    )
  })

  //console.log(imageDivs)

  return (
    <div className="App">
      <div class="half-container">
        <div class="left">
        {imageDivs}
        </div>
        <div class="right">
        <div style={{margin:'30px'}}>
        <h3>How much money?</h3>
        <input type="text"/>

        <div style={{marginTop:'20px'}}>
        <button onClick={() => setCash(getRandomCash())}>
        New Wallet
        </button>
        <button>
        Submit
        </button>
        </div>

        </div>
        </div>
      </div>
    </div>
  )
}

export default App;

标签： javascripthtmlcssflexbox

解决方案

您可以使用引导网格行列，而不是像这样转换它

let imageDivs = items.map( item => {
return (
  <div class="col-md-3">
  <img src={images[item]} alt="" >
  </img>
  </div>
)

})

并且不要忘记添加行类

<div class="row left">
        {imageDivs}
        </div>

推荐阅读