求助：如何将flip-card定位到文本白框右侧？

嘿，我来帮你搞定这个布局问题！首先提个小细节：你代码里同时用了.flip_card（下划线）和.flip-card（短横线）两个类名，样式会冲突，建议统一用.flip-card哈。

下面给你两种简单好用的方法，任选一种就行：

方法一：用Flex布局（推荐，现代布局首选） #

Flex能轻松实现横向排列，不用头疼定位的问题：

1. 先给.gallery和flip-card套一个共同的父容器，比如叫content-wrapper
2. 给这个父容器加Flex样式，控制对齐和间距

修改后的HTML结构： #

<!-- 新增父容器包裹gallery和flip-card -->
<div class="content-wrapper">
  <div class="gallery fadeGallery">
    <br>
    <p> Text Goes Here </p>
  </div>
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <!-- 注意这里img的src补全引号！之前少了开头的" -->
        <img src="https://github.com/terminator69851/How-to-build-a-PC/blob/master/pic.jpg?raw=true" height="300">
      </div>
      <div class="flip-card-back">
        <h1>This is a Computer</h1>
        <h3>It can be used for many jobs like 
          <li> Engineering </li>
          <li> Architecture </li>
          <li> Music Mixing </li>
          <li> Streaming </li>
        </h3>
        <p> This website will describe each part and its uses and show you how to build a computer. </p>
      </div>
    </div>
  </div>
</div>

新增的CSS样式： #

.content-wrapper {
  display: flex;
  justify-content: center; /* 让整个组合在页面居中 */
  align-items: flex-start; /* 两个元素顶部对齐 */
  gap: 20px; /* 给gallery和flip-card之间留20px间距 */
  margin: 20px auto; /* 和原来gallery的margin保持一致，避免布局混乱 */
  max-width: fit-content; /* 容器宽度自适应内容，不会撑满页面 */
}

/* 把原来.flip_card的定位样式删掉，保留flip-card的基础样式 */
.flip-card{
  /* 移除 position: absolute; top: 50px; left: 50px; */
  /* 其他原有样式比如width、perspective这些保留不动 */
}

这样设置后，flip-card就会乖乖排在白色文本盒子的右侧，而且响应式表现也更好，窗口缩小的时候还能自动调整（如果需要的话还可以加媒体查询优化移动端）。

方法二：调整绝对定位（适合不想改太多HTML结构的情况） #

如果你不想动太多HTML结构，也可以通过调整定位的参考元素来实现：

1. 给包含gallery和flip-card的区域加一个父容器，比如page-container，设置position: relative;——这样flip-card的绝对定位就会以这个父容器为基准，而不是整个页面
2. 调整flip-card的left值，让它刚好在gallery的右边

修改后的HTML结构： #

<div class="page-container">
  <div class="gallery fadeGallery">
    <br>
    <p> Text Goes Here </p>
  </div>
  <div class="flip-card">
    <!-- 你的flip-card内容 -->
  </div>
</div>

对应的CSS修改： #

.page-container {
  position: relative;
  width: fit-content;
  margin: 20px auto; /* 保持居中 */
}

.gallery {
  /* 原有样式不动 */
}

.flip-card {
  position: absolute;
  top: 0; /* 和gallery顶部对齐 */
  left: calc(100% + 20px); /* 距离gallery右侧20px，100%是gallery的宽度 */
  /* 其他基础样式保留 */
}

这种方法适合你不想大改结构的场景，但要注意如果gallery的高度变化，flip-card会始终和它顶部对齐，这点是没问题的。

最后再提个小bug：你flip-card里的img标签src属性少了开头的引号，已经在方法一的代码里帮你补上了，不然图片可能显示不出来哦～

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