如何实现内容在播放器时间码后以flex布局衔接展示？

要实现内容紧跟播放器时间码展示的效果，只需调整布局结构和CSS样式即可：

修改后的代码 #

CSS #

.container{
   border: 1px solid #eaeaed;
   padding: 5px 12px;
   display: flex;
   align-items: flex-start;
}

.player-action{
   display: flex;
   align-items:center;
   margin-right: 12px;
}

.content{
   flex: 1;
}

HTML #

<div class="container">
   <div class="player-action">
       <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#01868c" viewBox="0 0 16 16" class="bi bi-play-fill">
                  <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
               </svg>
       </div>
      <div class="timestamp">00:12.12 - 00:14.01</div>
   </div>
  <div class="content">
      美国国家航空航天局（NASA /ˈnæsə/）是美国联邦政府的一个独立机构，负责民用航天计划、航空研究和太空研究。NASA成立于1958年，取代了国家航空咨询委员会（NACA），旨在让美国的太空开发工作具有明显的民用导向，强调太空科学的和平应用。此后，NASA领导了大多数美国太空探索活动，包括水星计划、双子座计划、1968-1972年的阿波罗登月任务、天空实验室空间站和航天飞机。NASA目前支持国际空间站，并监督猎户座航天器、载人月球阿尔忒弥斯计划的太空发射系统、商业载人航天器以及计划中的月球门户空间站的开发。
  </div>
</div>

关键调整说明 #

• 将外层容器改为flex布局，让播放器区域和内容区域在同一行排列
• 设置align-items: flex-start确保内容顶部与播放器图标对齐
• 给播放器区域添加右侧间距，避免内容紧贴时间码
• 给内容区域设置flex: 1，让它自动填充容器剩余空间
• 修正了原代码中类名conatiner的拼写错误，确保样式正常生效

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