为啥我不能让这些卡片排成一行。他们不断地落入一列

Posted 2023-02-23

【中文标题】为啥我不能让这些卡片排成一行。他们不断地落入一列

【英文标题】：Why can't I get these cards to form a row. They are persistently falling into a column为什么我不能让这些卡片排成一行。他们不断地落入一列

【发布时间】：2021-02-27 23:45:38

【问题描述】：

这是我正在使用的代码，包括样式。它是 React 站点的一个组件，由于某种原因，我无法将卡片均匀地排成一排。我还想为较小的屏幕尺寸实现一些断点，但一次一个，除非有人有想法或理由首先这样做（我从一些编码人员那里听说过从小屏幕开始并开始工作......任何对此有什么想法？）让我知道是否还有其他需要解决的问题，我提前感谢和帮助！

import React from "react";  

...

import MoreVertIcon from "@material-ui/icons/MoreVert";

const useStyles = makeStyles((theme) => (
  root: 
    maxWidth: 345,
  ,
  media: 
    height: 0,
    paddingTop: "56.25%", // 16:9
  ,
  expand: 
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", 
      duration: theme.transitions.duration.shortest,
    ),
  ,
  expandOpen: 
    transform: "rotate(180deg)",
  ,
  avatar: 
    backgroundColor: red[500],
  ,
));

export default function RecipeReviewCard() 
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => 
    setExpanded(!expanded);
  ;

  return (
    <div>

      <Card className=classes.root>
        <CardHeader
          avatar=
            <Avatar aria-label="recipe" className=classes.avatar>
              R
            </Avatar>
          
          action=
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016"
        />
        <CardMedia
          className=classes.media
          image="/static/images/cards/paella.jpg"
          title="Paella dish"
        />
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            This impressive...like.
          </Typography>
        </CardContent>
        <CardActions disableSpacing>
          <IconButton aria-label="add to favorites">
            <FavoriteIcon />
          </IconButton>
          <IconButton aria-label="share">
            <ShareIcon />
          </IconButton>
          <IconButton
            className=clsx(classes.expand, 
              [classes.expandOpen]: expanded,
            )
            onClick=handleExpandClick
            aria-expanded=expanded
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </IconButton>
        </CardActions>
        <Collapse in=expanded timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>Method:</Typography>
            <Typography paragraph>
              Heat 1/2 cup...10 minutes.
            </Typography>
            <Typography paragraph>
              Heat oil...bring to a boil.
            </Typography>
            <Typography paragraph>
              Add rice and ...don’t
              open.)
            </Typography>
            <Typography>
              Set aside off of the heat to let rest for 10 minutes, and then
              serve.
            </Typography>
          </CardContent>
        </Collapse>
      </Card>

      <Card className=classes.root>
        <CardHeader
          avatar=
            <Avatar aria-label="recipe" className=classes.avatar>
              R
            </Avatar>
          
          action=
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016"
        />
        <CardMedia
          className=classes.media
          image="/static/images/cards/paella.jpg"
          title="Paella dish"
        />
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            This impressive ... like.
          </Typography>
        </CardContent>
        <CardActions disableSpacing>
          <IconButton aria-label="add to favorites">
            <FavoriteIcon />
          </IconButton>
          <IconButton aria-label="share">
            <ShareIcon />
          </IconButton>
          <IconButton
            className=clsx(classes.expand, 
              [classes.expandOpen]: expanded,
            )
            onClick=handleExpandClick
            aria-expanded=expanded
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </IconButton>
        </CardActions>
        <Collapse in=expanded timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>Method:</Typography>
            <Typography paragraph>
              Heat 1/2 cup...10 minutes.
            </Typography>
            <Typography paragraph>
              Heat oil ... to a boil.
            </Typography>
            <Typography paragraph>
              Add rice...that don’t
              open.)
            </Typography>
            <Typography>
              Set aside off of the heat to let rest for 10 minutes, and then
              serve.
            </Typography>
          </CardContent>
        </Collapse>
      </Card>
      
    </div>
  );

【参考方案1】：

您能否在包装您的<Card> 元素的<div> 上发布显示属性？除非我遗漏了什么（显然，如果我遗漏了这篇文章），这里显示的是用于渲染卡片的样式，但对于渲染它们之间/容器之间的关系而言却没有那么多？所以也许正在努力……

<div className="cardWrapper" style= 
  display: flex, 
  flexDirection: row
  justifyContent: spaceAround  >
   <Card />
   <Card />
   <Card />
</div>

【讨论】：

我应该注意到我连续获得了它们，但现在需要努力使它们响应断点。对最有效的方法有什么建议吗？我的方法是在我的 css 文件（未显示）中的相应断点中更改每行卡片的数量和卡片的大小。