排列卡片的难题仍然存在

我是一个对HTML新手，我一直在尝试为我的朋友创建一个网站，在网站中我正在制作卡片来展示信息。由于我在不同的部分制作了多个卡片，我想要将所有的卡片在它们各自的部分中对齐，但是我一直遇到困难。

首先，我尝试了inline-block，因为我猜测所有的元素加起来应该是一个块，但结果什么都没有发生。接下来，我尝试创建一个表格，并在表格中列出卡片，但也没有成功。它部分地成功了，但其他的卡片被缩小了，文本也溢出了。我该如何修复它？

* {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-color: #fafafa;
  color: rgb(32, 32, 32);
  margin: 0;
}

header {
  position: sticky;
  top: 0px;
}

nav {
  background-color: #fafafa;
  margin: 0;
  width: 100%;
}

ul {
  text-align: center;
}

li {
  display: inline-flex;
  text-align: center;
}

a {
  float: right;
  list-style-type: none;
  text-decoration: none;
  color: rgb(0, 0, 0);
  background-color: #fafafa;
  padding: 40px;
}

a:hover {
  float: right;
  list-style-type: none;
  text-decoration: none;
  transition-duration: 0.8s;
  font-size: 25px;
}

.Fcard1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 16%;
  margin-left: 32px;
}

.Fcard1:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.FCcontainer1 {
  padding: 2px 16px;
}

.Fcard2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 16%;
  margin-left: 32px;
}

.Fcard2:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.FCcontainer2 {
  padding: 2px 16px;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <!-- link rel="stylesheet" href="/Home/Home.css" -->
</head>

<body>
  <header>
    <nav>
      <ul>
        <li>
          <h2>Shoppables</h2>
        </li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Catalog</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Settings</a></li>
        <li></li>
        <li>
          <a href="#"><img src="/Home/Home-Images/search_FILL0_wght400_GRAD0_opsz24.png"></a>
        </li>
        <li>
          <a href="#"><img src="/Home/Home-Images/shopping_cart_FILL0_wght400_GRAD0_opsz24.png"></a>
        </li>
      </ul>
    </nav>
  </header>

  <main>
    <table style="width: 100%;">
      <tr>
        <section class="Featured-Sect">
          <h2 class="Featured-Header" style="margin: 32px;">Featured Products:</h2>

          <td style="width: 100%;">
            <div class="Fcard1">
              <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
              <div class="FCcontainer1">
                <h2><b>Placeholder</b></h2>
                <p>rrreee.00 USD</p>
              </div>
            </div>
          </td>

          <td style="width: 100%;">
            <div class="Fcard1">
              <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
              <div class="FCcontainer1">
                <h2><b>Placeholder</b></h2>
                <p>rrreee.00 USD</p>
              </div>
            </div>
          </td>
      </tr>

      </section>

      </section>
    </table>
  </main>
</body>

P粉766520991447 天前497

排列卡片的难题仍然存在

全部回复(1)我来回复