Question

我有这3个视频的问题，我需要把它放在同一行（水平）但它出现在垂直，我尝试显示内联，表和不工作任何可以帮助我这个？在这里我的代码：

HTML

<p><div class="contenidovid">
<div class="video-wrapper">
    <iframe src="http://www.youtube.com/embed/Zhawgd0REhA" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

<div class="video-wrapper">
    <iframe src="http://www.youtube.com/embed/Zhawgd0REhA" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
  </div>

<div class="video-wrapper">
    <iframe src="http://www.youtube.com/embed/Zhawgd0REhA" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
  </div></div></p>

CSS

.contenidovid {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  display: 
}

.video-wrapper {
    position: relative;
    padding-bottom: 74.25%; /* 4:3 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

.video-wrapper-narrow {
    padding-bottom: 40%;
}

iframe,object,embed,video,.videoWrapper,.video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-js, img.vjs-poster {
    width: 100% !important;
    height: 100% !important; //these need !important because IE wants to set height/width to 100px
    max-width: 100%;
}

Answer 1

结合制作＆＃34;视频包装＆＃34; ＆＃34;内联块＆＃34;并限制每个的宽度。您还需要设置＆＃34; font-size：0＆＃34; on＆＃34; contenidovid＆＃34;。

Answer 2

嗨，这里更新了jsfiddle enter link description here

你需要制作div float:left并制作他们的width:30%如果他们是3 div，则考虑将它们分为30-30-30和1-1-1作为保证金

使div浮动将防止dic消耗整个空间并以％为单位给出宽度将确保它们根据屏幕大小调整大小。

希望这会有所帮助：）

把我的视频放在同一行

2 个答案: