如何让两个div元素在大屏设备中横向并排显示？

我看了你遇到的问题：大屏下想让视频播放器和播放列表横向并排，但之前用padding-right、float、inline-block这些方法都没效果，还得保持视频的响应式宽高比，同时让两者高度匹配。核心问题出在你原来的布局逻辑上，咱们换个思路用Flex来解决：

问题根源 #

你之前给.customvideoplayer-video-block加padding-right:45%，是想压缩视频的显示宽度，但播放列表本身是这个容器的子元素，它只能在被压缩后的内容区域里，没法跑到右边的padding空间里，所以自然没法和视频并排。

具体修改步骤 #

1. 重构大屏下的父容器布局

把.customvideoplayer-video-block改成Flex容器，让两个子元素（视频容器和播放列表）直接横向分配空间，同时设置高度自动拉伸：

@media (min-width:1336px) {
  .customvideoplayer-video-block {
    display: flex;
    gap: 2rem; /* 给两者加个间距，看起来更舒服 */
    align-items: stretch; /* 自动让两个子元素高度匹配 */
  }
}

2. 固定视频容器的宽度占比

对应你之前想要的“缩小播放器尺寸”，给视频容器设置固定的宽度占比（比如55%，对应原来的45%留白），同时保留宽高比的逻辑：

@media (min-width:1336px) {
  .customvideoplayer-video-container {
    flex: 0 0 55%; /* 固定占55%宽度，不收缩也不扩展 */
    padding-left: 0; /* 去掉你之前加的大屏padding-left，现在不需要了 */
  }
}

3. 让播放列表自适应剩余空间

调整播放列表的样式，让它占满父容器的剩余宽度，同时高度自动匹配视频容器：

@media (min-width:1336px) {
  .customvideoplayer-video-playlist {
    flex: 1; /* 占剩余所有宽度 */
    height: 100%;
    display: flex;
    flex-direction: column; /* 让头部和列表垂直排列，充分利用空间 */
  }
  .customvideoplayer-video-playlist-table {
    flex: 1; /* 让列表区域自动填充剩余高度 */
    height: auto; /* 去掉固定高度，随父容器自适应 */
  }
}

完整修改后的CSS代码 #

.customvideoplayer-video-player{ background-color: #27282c; padding: 2em 10%; }
.customvideoplayer-video-container { position: relative; padding-bottom: calc(var(--aspect-ratio, .5625) * 100%); }
.customvideoplayer-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.customvideoplayer-video-playlist { width: 100%; border-bottom: 4px solid #ffa024; }
.customvideoplayer-video-playlist-table { color: white; background-color: #1b1c1f; height: 250px; overflow-y: scroll; }
.customvideoplayer-video-playlist-table-header-row { color: white; background-color: #1b1c1f; border-bottom: 4px solid #ffa024; padding: 10px; }
.customvideoplayer-video-playlist-table-header-row > p { margin: 0; }
.customvideoplayer-video-playlist-table-header-logo { height: 60px; width: auto; float: left; margin-right: 10px }
.customvideoplayer-video-playlist-table-row { padding: 5px; vertical-align: top; }

/* 大屏布局核心修改 */
@media (min-width:1336px) {
  .customvideoplayer-video-block {
    display: flex;
    gap: 2rem;
    align-items: stretch;
  }
  .customvideoplayer-video-container {
    flex: 0 0 55%;
    padding-left: 0;
  }
  .customvideoplayer-video-playlist {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .customvideoplayer-video-playlist-table {
    flex: 1;
    height: auto;
  }
}

/* 超大屏可选调整（如果需要更窄的视频） */
@media (min-width: 1921px) {
  .customvideoplayer-video-container {
    /* 比如改成 flex:0 0 50%; 让视频占一半宽度 */
  }
}

这样修改后，大屏下视频和播放列表会完美横向并排，视频保持原来的响应式宽高比，播放列表的高度会自动和视频容器对齐，移动端则依然保持堆叠的正常显示。

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