我正在關注YouTube上的免費代碼營教程(鏈接如下:https://www.youtube.com/watch? v = znivgo 8 u 7 ek & amp；t=651s)用html，css和vanilla js創建一個記憶游戲。現在，我想用Angular 14來做這件事，但是我對CSS有一些問題。我有兩個組件，app-board和app-card(下面你會找到每個組件的代碼)。要實現的結果是一個充滿覆蓋卡(3x4網格)的板。我不明白為什么如果我把所有東西都放在app-board中，它會工作得很好，但是如果我把卡片分成它自己的組件，這就不能正確地呈現(我看不到卡片背景圖像，并且組件是重疊的)。

這是工作版本，所有東西都在app-board中運行(類似于視頻):

超文本標記語言

<section class="memory-game">
  <div class="memory-card">
    <img class="front-face" src="../../../assets/img/aurelia.svg">
    <img class="back-face" src="../../../assets/img/js-badge.svg">
  </div>
  <div class="memory-card">
    <img class="front-face" src="../../../assets/img/aurelia.svg">
    <img class="back-face" src="../../../assets/img/js-badge.svg">
  </div>

  <!-- And so on with other cards... -->
</section>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.memory-game {
  width: 640px;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid lime;
}

.memory-card {
  width: 25%;
  height: 33.333%;
  margin: 5px;
  position: relative;
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #1C7CCC;
}

TS文件只包含每次使用cli創建新組件時都會找到的代碼。

這是由兩部分組成的版本。董事會是: 超文本標記語言

<section class="memory-game">
  <app-card [frontImgPath]="'../../../assets/img/aurelia.svg'"
    [backImgPath]="'../../../assets/img/js-badge.svg'"></app-card>
  <app-card [frontImgPath]="'../../../assets/img/aurelia.svg'"
    [backImgPath]="'../../../assets/img/js-badge.svg'"></app-card>

  <app-card [frontImgPath]="'../../../assets/img/vue.svg'"
    [backImgPath]="'../../../assets/img/js-badge.svg'"></app-card>
  <app-card [frontImgPath]="'../../../assets/img/vue.svg'"
    [backImgPath]="'../../../assets/img/js-badge.svg'"></app-card>

  <app-card [frontImgPath]="'../../../assets/img/angular.svg'"
    [backImgPath]="'../../../assets/img/js-badge.svg'"></app-card>
  <app-card [frontImgPath]="'../../../assets/img/angular.svg'"
    [backImgPath]="'../../../assets/img/js-badge.svg'"></app-card>

  <!-- So on for the other cards -->
</section>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.memory-game {
  width: 640px;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid lime;
}

還是默認TS。

app-card組件是: 超文本標記語言

<div class="memory-card">
  <img class="front-face" [src]="frontImgPath">
  <img class="back-face" [src]="backImgPath">
</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.memory-card {
  width: 25%;
  height: 33.333%;
  margin: 5px;
  position: relative;
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #1C7CCC;
}

分時（同timesharing）

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
  @Input() frontImgPath!: string;
  @Input() backImgPath!: string;
  constructor() { }

  ngOnInit(): void {
  }

}

在這兩種情況下，我都使用這個全局樣式

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: #060AB2;
}

我嘗試過但沒有成功的事情(甚至是愚蠢的事情):

將卡組件的文件夾放入板組件的文件夾中 使用視圖封裝。沒有人 使用網格布局 在Google Chrome的控制臺上，我檢查了元素，如果我移除width屬性，我可以看到卡片的背面，但是它非常大。增加和減少寬度不會產生任何變化。 檢查圖像路徑是否正確。我對此很確定，因為我已經從工作版本中復制/粘貼了它 檢查控制臺是否有錯誤，但沒有顯示任何錯誤 如果你需要更多的細節，就告訴我。由于這個帳戶是新的，我有非常有限的功能。我會盡力而為。謝謝大家！