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

【问题标题】：How to get 'inline' images to be all in one row?如何让“内联”图像全部排成一行？
【发布时间】：2020-10-17 04:26:33
【问题描述】：

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

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

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

这是我的代码：

App.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)
  }
}

App.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;

【问题讨论】：

为什么要使用变换来缩小它们，而不是只给它们一个百分比宽度？
如何在不使宽度与父 div 对应的情况下给它们一个百分比宽度？
如果你知道图片的宽度，比如200px，你可以给它们100px的宽度；或者如果你希望它们是容器宽度的四分之一，你可以给它们 25% 的宽度；或者你可以给它们一个与视口成比例的宽度：例如10 伏。
不过，我想去掉每张图片之间的空间，我该怎么做呢？
如果您绝对需要使用变换来缩放它们，您可以将变换放在父类上。问题是它们也不会像您期望的那样包裹在空间中。如果 3 张图片可以排成一行，如果将它们缩小一半，您将无法获得 6 张适合的图片，因为转换是在布局完成后应用的。

标签： javascript html css flexbox

【解决方案1】：

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

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

})

别忘了添加行类

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

【讨论】：