Question

我需要将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

Answer 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
}

当iframe显示时，如何将iframe和div并排：block;

1 个答案: