如何让卡组内联而不是一个在彼此之上

Question

我正在尝试让卡片组内联，而不是一个放在另一个上面。文档说 class "card-group" 应该这样做，但似乎没有任何效果。我将在下面附上示例代码和结果图片。

<div class="card-group">       
          {candidateData.map((candidate) => (
            <div class="card">
              <Card sx={{ maxWidth: 145 }}>
                <CardActionArea>
                  <CardMedia
                    component="img"
                    height="140"
                    src={candidate.img}
                    alt="uncle ruckus"
                  />
                  <CardContent>
                    <Typography gutterBottom variant="h6" component="div">
                      {candidate.name}
                    </Typography>
                    <Typography variant="body5" color="text.secondary">
                      {candidate.politics}
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card> 
            </div>
          ))}
      </div>

这是生成组件的候选数据json

{
    "main": {
        "candidates":[
            {
              "name":"Uncle Ruckus",
              "politics":"R-District 21",
              "img":"./Candidates/uncleruckus.jpg"
            },
            {
              "name":"Uncle Ruckus",
              "politics":"R-District 21",
              "img":"./Candidates/uncleruckus.jpg"
            }
          ]
    }
}

这是卡片叠放在另一张上面而不是内嵌（并排）的结果

Answer 1

有两种可能的方法可以解决该问题：

1。使用 Flex 样式

您可以通过将此样式赋予卡片的 parent/wrapper/container 来修复它

display: flex;
flex-direction: row;

所以可以这样：

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  margin: 0px 12px;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

.card-group {
  display: flex;
  flex-direction: row;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
  border-radius: 5px 5px 0 0;
}

<div class="card-group">
  <div class="card">
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>Card 1</b></h4>
    </div>
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>Card 2</b></h4>
    </div>
  </div>
</div>

2。使用 css 网格（位置类似于 table）

把这个样式放到card-group:

display: grid;
grid-template-columns: auto auto;
grid-column-gap: 12px;

上面的grid-template-columns帮助你决定一排有多少张牌，它是固定的。

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  margin: 0px 12px;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

.card-group {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 12px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
  border-radius: 5px 5px 0 0;
}

<div class="card-group">
  <div class="card">
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>Card 1</b></h4>
    </div>
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>Card 2</b></h4>
    </div>
  </div>
</div>

关于网格的更多参考：https://www.w3schools.com/css/css_grid.asp

如何让卡组内联而不是一个在彼此之上

How to get card group inline instead one on top of each other

html

javascript

css

reactjs

card

1。使用 Flex 样式

2。使用 css 网格（位置类似于 table）