时间戳

首页 > 解决方案 > 如何保持视频和课程菜单的高度相同

css - 如何保持视频和课程菜单的高度相同

问题描述

我正在尝试进行如下视频布局： 布局样机

视频嵌入将带有 iframe。我想保持左侧课程项目的高度与视频相同，并在视频和课程容器之后的底部有不同的容器。

html

<div>
  <div class='container'>
    <div class='video-container'>
      <iframe class='iframe' src="https://www.youtube.com/embed/I2UBjN5ER4s" width="640" height="360" frameBorder="0" 
          allow="autoplay; fullscreen" allowFullScreen title="https://player.vimeo.com/video/459785420">

          </iframe>
    </div>
    <div class='menu-items'>
      <div class='lesson'>
        lesson menu
      </div>
      ...
    </div>
  </div>
</div>

CSS：

.container {
  display: flex;
  height: 100px;
}

.video-container {
  overflow: hidden; 
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
  outline: 1px solid black;
  flex: 0 0 75%;
}

.iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
  }

.menu-items {
  padding: 10px;
  flex: 0 0 25;
}

.lesson {
  padding-bottom: 20px;
}

我创建了一个代码笔：https ://codepen.io/cagaroos/pen/XWdoROw?editors=1100

标签： css

解决方案

尝试这个

.video-container {
  height: auto;
}

代替

.video-container {
  padding-bottom: 56.25%;
  height: 0;
}

添加底部和右侧

.iframe {
    bottom:0;
    right:0;
}

删除padding-bottom最后一个lessondiv

.lesson:last-child {
  padding-bottom:0;
}

还删除html 中的宽度和高度 <iframe>标记

Codepen 演示

推荐阅读