如何在父div内将文本显示在子div右侧？

你的核心问题是父容器.player没设置横向布局规则，加上HTML类名和CSS不匹配，导致文本被挤到下方。下面是直接可行的解决方案：

修改后的代码 #

CSS 代码 #

/* 父容器设置Flex布局，让子元素横向排列 */
.player {
  display: flex;
  align-items: center; /* 垂直居中对齐，可按需改成flex-start */
  gap: 2rem; /* 子元素间的间距，可自行调整 */
}

.player-container {
  /* 移除不必要的position、left属性 */
  text-align: right;
  line-break: auto;
}

.player-container h1 {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 60%;
}

.player-container .model {
  padding-top: 3rem;
  width: 700px;
  height: 450px;
}

.player-about {
  /* 移除绝对定位，靠Flex布局自然排列在右侧 */
  display: inline-block;
}

HTML 代码 #

<div class="page-content">
  <div class="player" label="END">
    <div class="player-container">
      <h1 class="username">END</h1>
      <model-viewer class="model" src="assets/scene.gltf" alt="VR Headset" auto-rotate camera-controls ar ios-src="assets/scene.gltf">
      </model-viewer>
    </div>
    <!-- 修正类名：player_about → player-about，和CSS保持一致 -->
    <p class="player-about"> text </p>
  </div>
</div>

关键修改说明 #

• 给.player加display: flex：这是目前最简洁的横向布局方案，直接让内部的模型容器和文本段落横向排列。
• 修正类名：你CSS里写的是.player-about，但HTML里用的是player_about，导致样式完全不生效，这是容易忽略的细节。
• 移除多余绝对定位：.player-about的绝对定位会脱离文档流，反而破坏布局，用Flex布局就能自然实现右侧排列。

如果要调整文本的垂直位置，修改.player的align-items属性即可，比如align-items: flex-start能让文本顶部对齐模型。

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