当iframe显示时,如何将iframe和div并排:block;

时间:2017-04-25 10:13:05

标签: html css iframe

我需要将iframe和div并排排列。当我添加display:inline-block;时,问题是iframe消失 这是已设置的视频/ iframe样式。

.video-container {
    max-width: 620px;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    background-color: #000;
}

.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

我尝试将它们添加到包装器中并制作包装器relative和侧面div absolute,但无法使其正常工作。 这一切都必须有响应,但我可以自己管理那部分,只需要帮助将它们并排,最好是relative

以下是我想要完成的代码链接: https://codepen.io/Volcan3/pen/PmbYKz

1 个答案:

答案 0 :(得分:1)

这是你的目标吗? https://codepen.io/anon/pen/QvdymL

   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.video-container {
   width: 50%;
   float: left;
}

.video {
   position: relative;
   padding-bottom: 56.25%;
   background-color: #000;
   height: 0;
   overflow: hidden;
   max-width: 100%;
}

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

.side-div{
   background: blue;
   color: #fff;
   float: left;
   width: 50%;
}


.wrapper {
   width:100%;
   background-color:#CCC;
}

.wrapper-top {
   width:100%;
   height:60px;
   background-color:#000;
}

.wrapper-bottom {
   width:100%;
   height:40px;
   background-color:#000;
   clear: both
}