如何让两个absolute定位的div并排显示且中间带分隔符？

你的问题核心在于：

• 父容器#games是absolute定位，但未设置合适的布局方式，导致内部子元素无法正确排列
• .game-card和.game-hub-card用了absolute定位，导致父元素.game-list/.game-hub-list高度塌陷，无法撑起空间
• 分隔符.game-type-seperator没有样式，完全不可见

直接按下面的修改来解决：

修改后的CSS代码 #

html, body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  background-color: #333;
  color: white;
}

#games {
  position: absolute;
  /* 用flex实现子元素并排，gap控制间距 */
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.game-card, .game-hub-card, .game-card::before, .game-hub-card::before, .game-card::after, .game-hub-card::after {
  box-sizing: border-box;
}

.game-list, .game-hub-list {
  /* 给父容器设置relative，让内部absolute的card相对于它定位 */
  position: relative;
  /* 设置最小高度，避免高度塌陷 */
  min-height: 250px;
}

.game-card, .game-hub-card {
    z-index: 0;
    position: absolute;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.game-card:hover, .game-hub-card:hover {
    &::before {
        position: absolute;
        content: '';
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200px;
        height: 200px;
        background-color: #000;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(transparent, purple, transparent 30%);
        animation: rotate 4s linear infinite;
    }
    
    &::after {
        position: absolute;
        content: '';
        z-index: -1;
        left: 6px;
        top: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background: #000;
        border-radius: 5px;
    }
}

.game-list {
  padding-right: 20px;
}

/* 给分隔符添加样式 */
.game-type-seperator {
  width: 1px;
  background-color: #fff;
  align-self: stretch; /* 让分隔符高度和父容器一致 */
}

修改后的HTML代码 #

<div class="page" id="games">
  <div class="game-list">
    <h3>Games</h3>
    <div class="game-card">
      <img class="game-card-img" src="" alt="Game Icon">
      <h4 class="game-card-title">Coming soon</h4>
      <p class="game-card-description">Lorem Ipsum</p>
    </div>
  </div>
  <div class="game-type-seperator"></div>
  <div class="game-hub-list">
    <h3>Game Hubs</h3>
    <div class="game-hub-card">
      <img class="game-hub-card-img" src="" alt="Game Hub Icon">
      <h4 class="game-hub-card-title">Coming soon</h4>
      <p class="game-hub-card-description">Lorem Ipsum</p>
    </div>
  </div>
</div>

关键修改点说明 #

• 给#games添加display: flex，直接实现内部元素并排，gap控制元素间间距，比inline-block更可靠
• 给.game-list和.game-hub-list设置position: relative，让内部absolute定位的卡片相对于父容器定位，不会乱跑；同时设置min-height避免父元素高度塌陷
• 给分隔符.game-type-seperator添加宽度、背景色，并用align-self: stretch让它高度和父容器一致，实现垂直分隔效果
• 移除了.game-list的右侧border，改用独立的分隔符元素，更符合你要的中间带分隔符的需求

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