내 비디오를 같은 줄에 넣으십시오.

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%; 
}

출처

2015-01-23 Zycerk

나는'float'을 사용해 보았습니다. – kgh

'display : inline-block;'을'.video-wrapper'에 추가하십시오. –

안녕하세요 여기가 3 DIV 년대 내가 그들로 30-30-30와 1-1-1로 나눌 수 생각이 있다면 당신은 DIV float:left을하고 자신의 width:30%을해야 enter link description here

jsfiddle 업데이트됩니다 margin of

div float을 사용하면 dic이 전체 공간을 차지하는 것을 방지하고 %로 너비를 지정하면 화면 크기에 따라 크기가 조정됩니다.

희망이 있습니다.

출처

2015-01-23 19:06:06

안녕하세요, Aadil! 해결 됐어! – Zycerk

나는 Zycerk을 듣게되어 기쁩니다. 이것이 귀하의 문제를 해결 한 경우 귀하는이 답변을 승인 된 답변으로 표시 할 수 있습니다. 감사 :) –

사용 "비디오 래퍼" "인라인 블록"을 만들고 제한의 조합 각 너비 또한 "contenidovid"에 "font-size : 0"을 설정해야합니다.

출처

2015-01-23 18:59:59 Shay

내 비디오를 같은 줄에 넣으십시오.

답변

관련 문제