移动端视频缩略图未换行问题求助（附HTML/CSS代码）

我看了你的代码，问题主要出在这两个核心点上：

• .vid-list 设置了固定宽度 1344px，小屏幕下直接超出容器范围，导致横向滚动
• 移动端没有针对缩略项做响应式宽度调整，float: left 在固定宽度的父容器里无法自动换行

下面是具体的修复方案，只需要调整CSS代码就能解决问题：

修改后的完整CSS代码 #

.vid-container {
  position: relative;
  padding-bottom: 52%;
  padding-top: 30px;
  height: 0;
}

.vid-container iframe, .vid-container object, .vid-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vid-list-container {
  width: 92%;
  overflow: hidden;
  margin-top: 20px;
  margin-left:4%;
  padding-bottom: 20px;
}

/* 移除固定宽度，让列表自适应父容器 */
.vid-list {
  width: 100%;
  position: relative;
  top:0;
  left: 0;
  /* 用Flex布局替代float，更稳定的自动换行能力 */
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 给缩略项之间添加间距，替代padding的间隙 */
}

.vid-item {
  display: block;
  position: relative;
  /* 桌面端保持约18%宽度，减去gap的间距 */
  width: calc(18% - 8px);
  height: auto; /* 去掉固定高度，让内容自适应 */
  margin: 0;
  padding: 10px;
  box-sizing: border-box; /* 让padding包含在宽度内，避免超出容器 */
  cursor: pointer; /* 添加鼠标指针，提示可点击 */
}

.thumb {
  overflow:hidden;
  height: 0;
  padding-bottom: 56.25%; /* 用padding保持16:9的视频缩略图比例 */
  position: relative;
}

.thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填满容器，不变形 */
}

.vid-item .desc {
  color: #21A1D2;
  font-size: 15px;
  margin-top:5px;
}

/* 媒体查询：针对平板/移动端调整布局 */
@media (max-width: 768px) {
  /* 平板端每行显示2个缩略项 */
  .vid-item {
    width: calc(50% - 5px);
    font-size: 14px; /* 缩小描述文字，适配小屏幕 */
  }
}

@media (max-width: 480px) {
  /* 手机端每行显示1个缩略项 */
  .vid-item {
    width: 100%;
  }
}

关键修改点说明 #

• 移除.vid-list的固定宽度：换成width:100%，让列表完全适配父容器宽度
• 改用Flex布局：通过display:flex和flex-wrap:wrap实现自动换行，比float布局更可靠、更易维护
• 添加box-sizing:border-box：确保padding不会让元素实际宽度超出设定值，避免布局错乱
• 优化缩略图比例：用padding-bottom:56.25%保持16:9的标准视频比例，比固定高度更适配不同屏幕
• 媒体查询适配移动端：根据屏幕宽度动态调整缩略项的数量，彻底解决横向滚动问题

修改后，移动端的缩略图会自动根据屏幕宽度换行，同时完美保留桌面端的原有布局效果。

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