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