如何解决多Table布局对齐异常？已尝试Div与Float未生效

问题根源分析 #

1. float属性错误：CSS里不存在float: center这个值，直接导致div2的浮动完全失效
2. 硬编码定位冲突：用position: relative加left/right硬调位置，这种方式既不灵活，还会和浮动属性冲突，引发最后一个表格错位
3. 图片尺寸语法错误：img标签里的width=2 98写法有误，空格会让浏览器解析错误，图片尺寸异常打乱整体布局
4. HTML标签不规范：部分<td>用了</th>闭合，标签不匹配也会影响正常渲染

解决方案：用Flexbox实现稳定对齐布局 #

Flexbox是现代前端布局的首选方案，能轻松实现元素均匀分布、对齐，比float更稳定可靠。

修改后的完整代码

/* 父容器用Flex布局，实现子元素均匀分布 */
.event-container {
  display: flex;
  justify-content: space-around; /* 子元素间自动分配间距 */
  align-items: flex-start; /* 顶部对齐 */
  max-width: 1200px; /* 限制最大宽度，避免布局过宽 */
  margin: 0 auto; /* 整体水平居中 */
}

/* 每个事件卡片统一宽度，和图片尺寸匹配 */
.event-card {
  width: 298px;
}

/* 保留原有文本样式，统一移到CSS类中 */
.csize {
  font-size: 30px;
  color: rgb(10, 7, 96);
  text-align: left;
}

.desc {
  text-align: left;
}

.dates {
  text-align: left;
}

.buybutton {
  padding: 8px 16px;
  background-color: #0a0760;
  color: white;
  border: none;
  cursor: pointer;
}

<div class="event-container">
  <div class="event-card">
    <table>
      <tr>
        <td><img src="https://cdn.discordapp.com/attachments/1016525603668762635/1023594193345581076/DEC_AVE.png" width="298" height="421" alt="Dec Ave"></td>
      </tr>
      <tr>
        <td class="csize">DECEMBER AVENUE</td>
      </tr>
      <tr>
        <td class="desc">LOCATION</td>
      </tr>
      <tr>
        <td class="dates">JUNE 28, 2022</td>
      </tr>
      <tr>
        <td><input class="buybutton" type="submit" value="Buy Tickets"></td>
      </tr>
    </table>
  </div>
  <div class="event-card">
    <table>
      <tr>
        <td><img src="https://images1.smtickets.com/images/portrait_18082022203132.jpg" width="298" height="421" alt="TOMORROW X TOGETHER"></td>
      </tr>
      <tr>
        <td class="csize">TOMORROW X TO...</td>
      </tr>
      <tr>
        <td class="desc">LOCATION</td>
      </tr>
      <tr>
        <td class="dates">OCT 27-28, 2022</td>
      </tr>
      <tr>
        <td><input class="buybutton" type="submit" value="Buy Tickets"></td>
      </tr>
    </table>
  </div>
  <div class="event-card">
    <table>
      <tr>
        <td><img src="https://images1.smtickets.com/images/portrait_12042022174844.jpg" width="298" height="421" alt="RUSS THE JOURNEY"></td>
      </tr>
      <tr>
        <td class="csize">RUSS THE JOURN...</td>
      </tr>
      <tr>
        <td class="desc">LOCATION</td>
      </tr>
      <tr>
        <td class="dates">NOV 05, 2022</td>
      </tr>
      <tr>
        <td><input class="buybutton" type="submit" value="Buy Tickets"></td>
      </tr>
    </table>
  </div>
</div>

关键修改说明 #

• 新增父容器.event-container，通过display: flex实现三个卡片自动均匀分布，无需手动调整位置
• 给每个卡片设置统一宽度，和图片尺寸匹配，保证布局整齐
• 修复img标签的尺寸属性错误，去掉多余空格
• 修正HTML标签闭合错误，将</th>改为正确的</td>
• 把内联样式移到CSS类中，代码更整洁易维护

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