排列卡片的難題仍然存在

我是一個對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粉766520991443 天前491

排列卡片的難題仍然存在

全部回覆(1)我來回復