CSS实现卡片式Div横向排列并自动换行问题求助

这个问题的核心原因很明确：你给.fighter-card设置了position: absolute，绝对定位的元素会完全脱离正常的文档流，所有卡片都会被定位到同一个top:50%;left:50%的位置，所以新添加的卡片会直接叠在旧卡片上面。

下面是具体的修复步骤，同时还会优化卡片的交互逻辑：

1. 给卡片添加父容器 #

首先要给所有卡片套一个父容器，用来统一控制布局。修改后的HTML结构如下：

<div class="fighter-card-container">
  <!-- 第一个卡片 -->
  <div class="fighter-card">
    <div class="front active">
      <div class="ranking-position">1</div>
      <div class="more">
        <i class="fa fa-info-circle" aria-hidden="true"></i>
      </div>
      <div class="fighter-picture">
        <img src="~/images/Resources/RankingsPhotos/Lomachenko.png" />
      </div>
      <ul class="information">
        <li>
          <div class="information-left">Name:</div>
          <div class="information-right">aa</div>
        </li>
        <li>
          <div class="information-left">Weight:</div>
          <div class="information-right">aa</div>
        </li>
        <li>
          <div class="information-left">Belts:</div>
          <div class="information-right">aa</div>
        </li>
      </ul>
    </div>
    <div class="back">
      <div class="go-back">
        <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
      </div>
      <ul class="information">
        <li>
          <div class="information-left">Yesterday</div>
          <div class="information-right">9<sup>o</sup></div>
        </li>
        <li>
          <div class="information-left">Today</div>
          <div class="information-right">9<sup>o</sup></div>
        </li>
        <li>
          <div class="information-left">None of your business</div>
          <div class="information-right">9<sup>o</sup></div>
        </li>
        <li>
          <div class="information-left">Yesterday</div>
          <div class="information-right">9<sup>o</sup></div>
        </li>
        <li>
          <div class="information-left">Today</div>
          <div class="information-right">9<sup>o</sup></div>
        </li>
        <li>
          <div class="information-left">aa</div>
          <div class="information-right">9<sup>o</sup></div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 第二个卡片 -->
  <div class="fighter-card">
    <!-- 这里放和第一个卡片一样的内容 -->
  </div>
</div>

2. 修改CSS实现横向排列自动换行 #

删掉卡片的绝对定位样式，改用Flex布局让卡片横向排列并自动换行：

/* 父容器样式：控制卡片布局 */
.fighter-card-container {
  display: flex;
  flex-wrap: wrap; /* 宽度不够时自动换行 */
  gap: 20px; /* 卡片之间的间距，可根据需求调整 */
  padding: 20px;
  justify-content: center; /* 可选：让卡片在容器中居中排列 */
}

/* 修改卡片样式：移除绝对定位，保留相对定位用于内部元素参照 */
.fighter-card {
  /* 移除以下绝对定位样式：
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  */
  width: 400px;
  min-height: 400px;
  position: relative; /* 必须保留，因为卡片内部的.back用了绝对定位，需要以卡片为参照 */
}

/* 其余原有CSS样式保持不变 */
.fighter-card .front {
  width: 100%;
  height: 100%;
  background: #171717;
  padding: 30px;
  box-sizing: border-box;
  transition: .5s;
  transform-origin: right;
}
/* ... 其他原有样式都保留 */

3. 修复JavaScript的全局触发问题 #

原来的JS点击任意一个more按钮，会让所有卡片同时翻转，这显然不是你想要的。修改为只操作当前点击的卡片：

$(document).ready(function () {
  $('.more').click(function () {
    // 找到当前点击按钮所在的卡片，只操作该卡片的正反两面
    const currentCard = $(this).closest('.fighter-card');
    currentCard.find('.back').addClass('active');
    currentCard.find('.front').removeClass('active');
  });

  $('.go-back').click(function () {
    const currentCard = $(this).closest('.fighter-card');
    currentCard.find('.back').removeClass('active');
    currentCard.find('.front').addClass('active');
  });
});

这样修改之后，卡片会自动在容器内横向排列，当屏幕宽度不足以容纳更多卡片时会自动换行，而且每个卡片的翻转操作都是独立的，不会影响其他卡片。

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