HTML卡片布局对齐故障求助：卡片无法正常排列的解决方法

问题根源 #

1. table布局的错误用法：你把<section>直接放在<tr>里，违反了HTML表格的结构规范（表格内只能嵌套<tr>、<td>等表格相关元素），导致布局逻辑混乱；同时给<td>设置width:100%会让单元格互相挤压，卡片被缩小后自然引发文字溢出。
2. inline-block未生效的原因：inline-block元素默认会保留标签间的空白字符，加上你给卡片设置了固定width:16%和margin-left:32px，总宽度很容易超过容器，导致卡片无法横向排列；另外如果没给父容器设置合适的对齐方式，也会影响排列效果。

最优解决方案：用Flexbox布局 #

Flexbox是专门为一维布局设计的工具，能轻松实现卡片的整齐排列、换行和间距控制，完全替代table和inline-block的繁琐写法。

修改后的完整代码

HTML部分

<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>
          <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>
    <section class="Featured-Sect">
      <h2 class="Featured-Header" style="margin: 32px;">Featured Products:</h2>
      <!-- 卡片容器，用flex布局 -->
      <div class="cards-container">
        <div class="Fcard">
          <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
          <div class="FCcontainer">
            <h2><b>Placeholder</b></h2>
            <p>$0.00 USD</p>
          </div>
        </div>
        <div class="Fcard">
          <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
          <div class="FCcontainer">
            <h2><b>Placeholder</b></h2>
            <p>$0.00 USD</p>
          </div>
        </div>
        <!-- 可继续添加更多卡片 -->
      </div>
    </section>
  </main>
</body>

CSS部分

* {
  font-family: Arial, Helvetica, sans-serif;
  /* 统一盒模型，避免宽度计算混乱 */
  box-sizing: border-box;
}

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;
  padding: 0;
  margin: 0;
}

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

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

a:hover {
  transition-duration: 0.8s;
  font-size: 25px;
}

/* 卡片容器核心样式 */
.cards-container {
  display: flex;
  /* 卡片超出容器宽度时自动换行 */
  flex-wrap: wrap;
  /* 卡片之间的间距，替代margin-left，更灵活 */
  gap: 32px;
  padding: 0 32px;
}

/* 统一卡片样式，不用重复写Fcard1、Fcard2 */
.Fcard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  /* 卡片宽度，calc计算总宽度，减去gap的占比，确保每行能放下合适数量的卡片 */
  width: calc((100% - 32px) / 2);
  /* 若想每行放3张，改成calc((100% - 64px) / 3)即可，64是2个gap的总和 */
}

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

.FCcontainer {
  padding: 2px 16px;
}

关键修改点说明 #

1. 移除table布局：换成语义化的<div class="cards-container">作为卡片容器，符合HTML结构规范。
2. Flex容器设置：给.cards-container添加display:flex和flex-wrap:wrap，让卡片自动横向排列，超出宽度时换行；用gap统一设置卡片间的间距，比单独设置margin更简洁。
3. 卡片宽度计算：用calc()计算卡片宽度，确保在不同屏幕宽度下，卡片能均匀分配容器空间，不会出现挤压或溢出。
4. 统一卡片样式：把Fcard1、Fcard2合并成.Fcard，减少冗余代码，方便后续维护。
5. 修复盒模型：给*添加box-sizing:border-box，让元素的padding和border不会额外增加宽度，避免布局计算错误。

内容的提问来源于stack exchange，提问作者DanStanMan