html - 将我的视频放在同一行

Question

我对这 3 个视频有疑问，我需要将它们放在同一行(水平)但它显示为垂直，我尝试使用内联显示、表格但不起作用任何可以帮助我解决这个问题吗？这是我的代码:

http://jsfiddle.net/goz6L2no/

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

您好，这里更新了 jsfiddle enter link description here

你需要制作 div float:left 并制作它们的 width:30% 如果它们是 3 div's 我认为它们被分成 30-30- 30 和 1-1-1 作为 margin 的

使 div float 将防止 dic 占用整个空间，并以 % 为单位指定宽度将确保它们根据屏幕尺寸调整大小。

希望这有帮助:)