如何将含视频切换链接的div对齐到video元素下方并实现inline效果

我制作了一个包含视频及视频播放切换链接的页面，承载链接的div类名为prtd，希望将该div对齐到video元素下方，实现横向排列的inline显示效果。相关代码如下：

原代码 #

CSS #

@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  background-image: linear-gradient(130deg, rgb(230, 124, 71), rgb(197, 166, 62));
  height: 900px;
}

.hdlg {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hdlg>img {
  width: 22vw;
  height: 29vh;
  border-radius: 15px;
  margin-top: 8px;
}

.slg {
  display: flex;
  justify-content: center;
  font-family: 'Teko', sans-serif;
  font-size: 20px;
}

.brd {
  display: flex;
  border: 2px solid rgb(98, 96, 96);
  width: 39%;
  position: absolute;
  left: 31%;
  right: 0%;
  justify-content: center;
  align-items: flex-end;
}

.cont {
  display: flex;
  background-color: rgba(221, 207, 173, 0.605);
  width: 95%;
  height: 87%;
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 20px;
  margin-bottom: 10px;
  padding-top: 10px;
  border-radius: 10px;
  text-align: center;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  border-left: 4px solid white;
  border-top: 4px solid white;
}

#vid-player {
  width: 65%;
  height: 60%;
  margin: 0 auto;
}

.prtd {
  display: inline;
  width: 80px;
  height: 60px;
  margin: 10px auto;
  padding: 10px;
  background-color: #7ba758;
  border-radius: 5px;
  cursor: pointer;
}

footer {
  background-color: rgb(104, 99, 25);
  color: black;
  height: 12vh;
  font-size: 17px;
  margin-right: 20px;
  margin-left: 20px;
  padding: 17px;
  border-radius: 8px;
  text-align: center;
}

@media screen and (max-width: 500px) {
  .hdlg>img {
    width: 48vw;
    height: 25vh;
  }
  .slg {
    font-size: 27px;
  }
  #thmb {
    width: 60vw;
    height: 36vh;
  }
  .box {
    width: 62vw;
    height: 48vh;
    font-size: 18px;
  }
  .box:hover {
    height: 51vh;
    font-size: 20px;
  }
  .cont {
    margin-right: 0px;
    margin-left: 2px;
    margin-top: 15px;
  }
  .brd {
    width: 45%;
    left: 28%;
    right: 0%;
  }
}

HTML #

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vid</title>
</head>

<body>
  </head>

  <body>
    <div class="hdlg">
      <img src="log0.png">
    </div>
    <span class="slg"><h2>logo</h2></span>
    <span class="brd"> </span>
    <div class="cont">
      <video id="vid-player" controls>
           <source src="part1.mp4" type="video/mp4">
           Your browser does not support HTML5 video.
       </video>
      <div class="prtd">
        <a class="alnk" href="#" data-src="part3.mp4">Part 4</a>
        <a class="alnk" href="#" data-src="part.mp4">Part 1</a>
        <a class="alnk" href="#" data-src="part.mp4">Part 2</a>
        <a class="alnk" href="#" data-src="part3.mp4">Part 3</a>
      </div>
    </div>
  </body>

  </html>

修改后的代码 #

CSS核心改动 #

调整容器布局实现垂直排列与横向链接效果：

.cont {
  display: flex;
  flex-direction: column; /* 让内部元素垂直排列，视频在上、链接容器在下 */
  background-color: rgba(221, 207, 173, 0.605);
  width: 95%;
  height: 87%;
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 20px;
  margin-bottom: 10px;
  padding-top: 10px;
  border-radius: 10px;
  text-align: center;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  border-left: 4px solid white;
  border-top: 4px solid white;
}

.prtd {
  display: flex; /* 从inline改为flex，实现内部链接横向排列 */
  justify-content: center;
  gap: 15px; /* 设置链接之间的间距 */
  width: fit-content; /* 宽度适配内容 */
  height: auto; /* 高度适配内容 */
  margin: 10px auto;
  padding: 10px 20px;
  background-color: #7ba758;
  border-radius: 5px;
  cursor: pointer;
}

HTML结构修正 #

移除重复的</head>和<body>标签，修正后完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vid</title>
</head>

<body>
  <div class="hdlg">
    <img src="log0.png">
  </div>
  <span class="slg"><h2>logo</h2></span>
  <span class="brd"> </span>
  <div class="cont">
    <video id="vid-player" controls>
         <source src="part1.mp4" type="video/mp4">
         Your browser does not support HTML5 video.
     </video>
    <div class="prtd">
      <a class="alnk" href="#" data-src="part3.mp4">Part 4</a>
      <a class="alnk" href="#" data-src="part.mp4">Part 1</a>
      <a class="alnk" href="#" data-src="part.mp4">Part 2</a>
      <a class="alnk" href="#" data-src="part3.mp4">Part 3</a>
    </div>
  </div>
</body>
</html>

效果说明 #

• .cont设置flex-direction: column后，视频与链接容器自动垂直排列，链接容器固定在视频下方
• .prtd改为flex布局后，内部切换链接横向均匀分布，同时通过gap控制间距，视觉更整洁
• 修正HTML结构错误，避免浏览器解析异常

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