div盒子垂直堆叠而非并排显示的视频容器布局问题求解

现有代码存在多处属性拼写错误、缺少单位、属性值无效的问题，按如下调整即可实现vidbox并排显示的效果： #

现有代码问题汇总 #

• 属性拼写错误：float 被误写为 fload，width 被误写为 weight
• 所有尺寸数值缺少单位，CSS中长度值必须明确指定单位（此处使用像素单位px）
• float 不存在center属性值，属于无效代码
• 父容器.vidcontainer 高度300px，远小于子元素.vidbox的370px高度，会导致子元素溢出

修正后的CSS代码（基于浮动布局） #

.vidcontainer {
  position: relative;
  width: 1200px;
  /* 调整高度适配子元素+上下边距 */
  height: 400px;
  margin: 240px auto;
  background: #ddd;
  border-radius: 15px;
  /* 清除浮动避免高度塌陷 */
  overflow: hidden;
}

.vidcontainer .vidbox {
  position: relative;
  width: 370px;
  float: left;
  height: 370px;
  background: #161616;
  margin: 15px;
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

更优方案：使用Flex布局（无需处理浮动塌陷问题） #

如果希望布局逻辑更简洁易维护，可以直接使用Flex布局实现：

.vidcontainer {
  position: relative;
  width: 1200px;
  height: 400px;
  margin: 240px auto;
  background: #ddd;
  border-radius: 15px;
  /* 开启flex布局 */
  display: flex;
  /* 子元素水平均匀分布 */
  justify-content: space-around;
  /* 子元素垂直居中 */
  align-items: center;
}

.vidcontainer .vidbox {
  position: relative;
  width: 370px;
  height: 370px;
  background: #161616;
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

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