流媒体网站练习：float布局列元素重叠，求四列正常排列方案

问题根源 #

1. 固定高度导致内容溢出：你给.column设置了height:200px，但内部图片高度就有270px，加上文字内容远超过这个高度，溢出的部分会和下方元素重叠。
2. 错误的Grid属性使用：grid-template-columns是给网格容器（比如你的.row）用的，放在.column里完全无效。
3. Float布局局限性：用float做多列排版容易出现高度坍塌、错位问题，不如Grid或Flexbox适合这种卡片式布局。

修复方案（用Grid实现自适应四列布局） #

直接改用CSS Grid布局，这是做流式卡片最省心的方案，自动处理换行和间距：

修改后的CSS

.row {
  display: grid;
  /* 自动填充，每列最小240px，自适应屏幕调整列数；要强制固定4列可以用repeat(4, 1fr) */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; /* 卡片之间的间距，替代margin */
  padding: 20px 0;
}

.column {
  background-color: rgb(249, 215, 142);
  padding: 10px;
  /* 让卡片内部内容垂直居中排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.column img {
  width: 100%; /* 图片自适应卡片宽度 */
  height: auto; /* 保持图片比例 */
  margin-bottom: 10px;
}

.video-title, .video-episode {
  margin: 5px 0;
}

修改后的HTML（修正标签错误+简化结构）

<div class="row">
  <div class="column">
    <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Oshi No Ko Season 2.jpg" 
         alt="Oshi No Ko Season 2">
    <p class="video-title">Oshi No Ko Season 2</p>
    <p class="video-episode">Episode 1</p>
    <p class="video-title">Sub</p>
  </div>

  <div class="column">
    <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Failure Frame Season 1.jpg" 
         alt="Failure Frame Season 1">
    <p class="video-title">Failure Frame</p>
    <p class="video-episode">Season 1 Episode 1</p>
    <p class="video-title">Sub</p>
  </div>

  <div class="column">
    <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Vanguard Divinez Season 2.jpg" 
         alt="Vanguard Divinez Season 2">
    <p class="video-title">Vanguard Divinez Season 2</p>
    <p class="video-episode">Episode 1</p>
    <p class="video-title">Sub</p>
  </div>

  <div class="column">
    <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Alya Sometimes Hides Her Feelings in Russian Season 1.jpg" 
         alt="Alya Sometimes Hides Her Feelings in Russian Season 1">
    <p class="video-title">Alya Sometimes Hides Her Feelings in Russian Season 1</p>
    <p class="video-episode">Episode 1</p>
    <p class="video-title">Dub|Sub</p>
  </div>

  <!-- 剩余卡片按上述结构添加即可 -->
</div>

关键改动说明 #

• 给.row设置display: grid，用grid-template-columns控制列数：repeat(auto-fill, minmax(240px, 1fr))会自动根据屏幕宽度调整列数，也可以直接写repeat(4, 1fr)强制固定4列。
• 用gap属性替代margin，统一控制卡片之间的间距，避免排版混乱。
• 移除.column的固定height，让卡片高度自适应内容，彻底解决溢出重叠问题。
• 修正HTML中错误的</img>标签（img是自闭合标签，不需要结束标签）。
• 给图片设置width:100%让它自适应卡片宽度，保持布局一致性。

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