Question

尝试自己做这个项目时遇到一些小问题。我决定用溢流口剪卡，以便可以堆叠，但是堆叠不能正常工作。目标是使卡更多地堆叠在一起。我已经为css部分的代码和react部分的代码附加了图片，我几乎在组件中使用了相同的代码，并对该组件调用了7次以获取所有7列。我具有将卡片加载到游戏中的功能。我还提供了与我的问题类似的其他文章中尝试的步骤的详细信息。

这是我的CSS代码：

    body {
  background: #339900; 
}

.container {
  width: 1700px;
  border: 1px solid blue;
}
span {
  display: block; 
}

.outline {
  text-align: center; 
  background: #FFF; 
  color: #cc0033; 
  border: 1px solid black; 
}
.scene {
  width: 120px; 
  height: 180px; 
  perspective: 360px; 
}

.top{ 
  text-align: left;
}
.bottom{ 
  text-align: right;
}

.topRow{
  display: flex;
}

.drawPile {
  display: flex;
  margin-right: 300px;
  width: 500px;

}
.finalStack {
  width: 900px;
  display: flex;
  justify-content: space-between;

}

.bottomRow {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
}

.drawFrom {
  display: flex;
  justify-content:  center;
  text-align: center;
  align-content: center;
  background: blue;
}

.black {
  color: black;
}
.red {
  color: red;
}
.deck {
  display: flex; 
  height: 200px; 
  flex-direction: column;
}

.card {
  flex: 100px 1 0; 
  border: solid 1px black;
  border-radius: 5px; 
  background-color: white; 
  box-shadow: 3px 3px 3px gray; 
  width: 120px;
  height: 180px; 

}

.stackedCards {
  max-height: 50px;
  overflow: hidden;
}

.lastInStack {
  overflow: auto;
}

不确定是否需要这样做，但是我将在每个部分发布代码。我这样做是为了做出反应。

render() {
    console.log("BottomSection");
    console.log(this.props);
    const cards = this.props.cards;
    console.log(cards);
    return (
      <div>
        {cards.map((card, id) => (
            <div  key = {id} className="deck">
                <div onClick = {this.clickingCard} draggable = "true" className = { id === this.props.cards.length -1 ? "card lastInStack outline scene column" : "card stackedCards outline scene column"}>
                <div className={"top " + card.color}>
                <span>{card.value}</span>{" "}
                {card.suit === "hearts" ? (
                  <span>&hearts;</span>
                ) : card.suit === "spades" ? (
                  <span>&spades;</span>
                ) : card.suit === "clubs" ? (
                  <span>&clubs;</span>
                ) : (
                  <span>&#x2666;</span>
                )}
              </div>
              {card.suit === "hearts" ? (
                <h1 className={card.color}>&hearts;</h1>
              ) : card.suit === "spades" ? (
                <h1 className={card.color}>&spades;</h1>
              ) : card.suit === "clubs" ? (
                <h1 className={card.color}>&clubs;</h1>
              ) : (
                <h1 className={card.color}>&#x2666;</h1>
              )}
              <div className={"bottom " + card.color}>
                {card.suit === "hearts" ? (
                  <span>&hearts;</span>
                ) : card.suit === "spades" ? (
                  <span>&spades;</span>
                ) : card.suit === "clubs" ? (
                  <span>&clubs;</span>
                ) : (
                  <span>&#x2666;</span>
                )}
                <span>{card.value}</span>
                {/* <hr/> */}
              </div>
                </div>
            </div>
        ))}
      </div>
    );
  }

好的，所以这里的想法是将卡堆叠起来，以便在卡之间没有绿色空间的情况下进行连接。我将不得不将卡翻过来或者有背面，但是现在我只是在尝试堆叠卡。一旦我将所有东西正确堆叠起来，我将担心背面并单击卡以露出另一面。我试图以负数使用底边距，但是这似乎只会拉伸卡本身并使其更长。不知道这是否是因为我创建每张卡而不是使用图像的方式。我还尝试过使用负的顶部和相对位置作为推荐的文章之一，但没有发现变化。其他文章似乎不适用于我的实现。

Answer 1

.deck {
  display: flex; 
  flex-direction: column;
}
.lastInstack {
  /*leave blank no need for overflow*/
}

这是我实现代码的方法的解决方案。 Peter Ambruzs也对这些更改进行了调查。它不起作用的原因是甲板上设置的高度将每个div按高度分开。删除高度可消除间隔。

如何堆叠纸牌？

1 个答案: