如何在同一行获得 4 张卡目前我连续有 2 张卡

Question

我正在制作一个食谱 Web 应用程序，但我没有使用 Material ui 或 bootstrap 中的任何内置卡片功能。我想连续有 4 个配方组件而不是两个。食谱组件还有一个名为成分的按钮，因此每当我单击该按钮时，它应该只显示该食品食谱的成分，而是显示该行中所有食谱组件的食谱。请告诉我如何解决这个问题。 我将 github repo 链接附加到项目中：- https://github.com/ankita413/recipe 成分组件在成分.jsx 中定义，它的 css 在 recipe.css 中 配方组件在 recipe.jsx 中，它的 css 在 recipe.css 中 同样对于按钮功能，我在此处附上代码和图像[当我单击第一个配方的成分按钮时，第二个成分按钮也会打开，但我不希望显示任何内容，只有我单击的成分按钮应该打开][1] [1]：https://i.stack.imgur.com/z4DUY.png 包含配料按钮的配方组件代码

import React, { useState } from 'react';
import  './styles/recipe.css';
import Recipeingredient from './ingredient';
const Recipe = ({title,calories,image,ingredients}) => {
const [show,setShow] = useState(false);


return(
<div className="recipe">
    <h2>Search Recipe</h2>
    <h3>{title}</h3>
    <p>Calories: {Math.floor(calories)}</p>
    <img src={image} alt = {title}  ></img>
    <button onClick={() => setShow(!show)}>Ingredients</button>
   {show && <Recipeingredient ingredients = {ingredients}/>}
</div>
 
);


}
export default Recipe;

Answer 1

在recipe.css中

    width: 30rem;
    margin: 3rem;
    display: flex;
    flex-direction: column;
    background-color: #d3d3d3;
    padding: 2rem;
    position: relative;
    border-radius: 0.5rem;
    box-shadow: 2rem 3rem 5rem #aaa;
  }

在 app.css 中

.recipes{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

在这里，您为每张卡片指定了 30 rem 的宽度，大约为 30*16px（因为 rem 未设置为自定义）。这对于三张卡片来说要大得多，它等于 1440 像素，加上 3 rem 的边距，这为每张卡片 1728 像素的每边提供了额外的 96 像素。所以没有办法连续获得4张牌。那就是你为食谱制作了 flex: wrap。只需移动到下一行

所以要解决这个问题，减少每张卡片之间的边距，并将卡片的宽度减少到 300 像素。并且边距为 1 rem。

第二个问题 我为你创建了代码沙盒 https://codesandbox.io/s/hungry-glade-pn58b 实际上，第二个配方没有打开。但是由于默认的自动高度，第二张卡正在扩展。 为此，您可以定义 height:fit-content

.recipe {
  width: 30rem;
  margin: 3rem;
  display: flex;
  flex-direction: column;
  height: fit-content; //add this
  background-color: #d3d3d3;
  padding: 2rem;
  position: relative;
  border-radius: 0.5rem;
  box-shadow: 2rem 3rem 5rem #aaa;
}