CSS实现手牌式子元素：水平居中、按需重叠且不换行

我想要创建一个模拟手牌的HTML/CSS组件：父级<div>为固定高度、100%宽度的容器，内部包含数量可变的等宽等高子<div>（代表卡片），需满足以下需求：

• 子元素保持单行排列，不换行
• 子元素整体水平居中
• 当父容器宽度不足以容纳所有卡片时，子元素自动水平重叠
• 父容器尺寸固定，不受子元素数量影响

我尝试了以下代码，但未达到预期效果：

.parent {
  height: 110px;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

.child {
  border: 1px gray solid;
  display: inline-block;
  height: 100px;
  width: 80px;
}

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  ...
</div>

这段代码在父容器宽度足够时表现正常，但宽度不足时，子元素会超出父容器边界，不会自动重叠。我还试过给子元素设置浮动并使用margin-left:calc(20% - 100px)，但浮动元素会换行，且margin值需随子元素数量调整，不符合需求。

可以通过Flex布局结合JavaScript动态计算偏移量实现需求，核心思路是：当卡片总宽度超过父容器宽度时，计算每个卡片需要向左偏移的距离，让卡片重叠后整体保持居中。

完整代码 #

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <!-- 可添加任意数量的child元素 -->
</div>

<style>
.parent {
  height: 110px;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.child {
  height: 100px;
  width: 80px;
  border: 1px solid gray;
  flex-shrink: 0;
  position: relative;
  /* 可选：添加卡片阴影增强立体感 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

<script>
function adjustHand() {
  const parent = document.querySelector('.parent');
  const children = parent.querySelectorAll('.child');
  const cardWidth = children[0]?.offsetWidth || 80;
  const parentWidth = parent.offsetWidth;
  const totalCards = children.length;
  const totalCardWidth = cardWidth * totalCards;

  if (totalCardWidth <= parentWidth) {
    // 宽度足够，无需重叠，重置偏移
    children.forEach(child => {
      child.style.transform = '';
    });
    return;
  }

  // 计算每个卡片需要向左偏移的距离
  const overlapTotal = totalCardWidth - parentWidth;
  const perCardOverlap = overlapTotal / (totalCards - 1);

  children.forEach((child, index) => {
    // 第一个卡片不偏移，后续每个卡片向左偏移对应距离
    const offset = index * perCardOverlap;
    child.style.transform = `translateX(-${offset}px)`;
  });
}

// 初始化时调整
adjustHand();
// 窗口大小变化时重新调整
window.addEventListener('resize', adjustHand);
</script>

原理说明 #

1. 父容器设置：使用display:flex和justify-content:center保证卡片默认居中，overflow:hidden隐藏超出父容器的部分，固定高度和宽度。
2. 子元素设置：flex-shrink:0确保卡片不会被压缩变形，保持固定尺寸。
3. 动态计算：
   • 当卡片总宽度小于等于父容器宽度时，重置偏移，保持正常居中排列。
   • 当总宽度超出时，计算所有卡片需要重叠的总宽度，平均分配到每两个相邻卡片之间，通过transform:translateX让后续卡片向左偏移，实现自动重叠且整体居中。
4. 响应式处理：监听窗口大小变化，实时重新计算偏移量，保证布局始终符合需求。

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