制作两个vimeo视频并排，居中，并作出反应

Question

我必须Vimeo视频，并且我试图让他们并排坐在身体中心，只要一台计算机正在查看他们。然后，每当一个小屏幕（如iPhone）正在观看它们时，我想要正确的一个落在左侧下方并且适合身体的大小。

这是我到目前为止。 HTML：

<div class="vimeo-wrapper"> 
    <div class="vimeo-video-1 vimeo-standard"> 
     <iframe src="//player.vimeo.com/video/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen align="middle" seamless></iframe> 
    </div> 
    <div class="vimeo-video-2 vimeo-standard"> 
     <iframe src="//player.vimeo.com/video/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen align="middle" seamless></iframe> 
    </div> 
</div> 

CSS：

.vimeo-standard { 
    width:500px; 
    height:auto; 
    position:relative; 
    margin: 10px auto; 
    float: left; 
} 
.vimeo-video-2 { 
    margin-left: 15px; 
} 
.vimeo-wrapper { 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
} 

@media (max-width:767px) { 
    .vimeo-standard { 
     position: relative; 
     padding-bottom: 56.25%; /* 16/9 ratio */ 
     padding-top: 30px; /* IE6 workaround*/ 
     height: 0; 
     overflow: hidden; 
    } 
    .vimeo-video-2 { 
     margin-left: 0; 
    } 
    .vimeo-standard iframe, .vimeo-standard object, .vimeo-standard embed { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
    } 
} 

@media (min-width:768px) and (max-width:1199px) { 
    .vimeo-standard iframe { 
     width: 352px; 
     height: 198px; 
    } 
    .vimeo-standard { 
     width: 352px; 
    } 
    .vimeo-video-2 { 
     margin-left: 10px; 
    } 
} 

我已经创造了一些响应CSS它，但我有麻烦恰到好处，使其集中，反应灵敏，并排侧当它是全屏。

我应该如何更改HTML和CSS来做到这一点？

Answer 1

我编辑了你的css，它现在不那么完全响应。我已经添加了一些额外的borders，因此您可以识别标记中每个div的边界，您可以将其删除。

关键居中容器中的项目是给position:relative和margin:0 auto

，是的，当你需要使用你需要使用clearfix一个容器内的漂浮物，使容器可以重置其height财产

Check it at fiddle

.vimeo-wrapper { 
     max-width: 980px; 
     position: relative; 
     margin: 0 auto; 
     border: 1px solid green; 
    } 

    .vimeo-standard { 
     float: left; 
     height: 300px; 
     width: 47%; 
     border: 1px solid #000; 
     margin: 10px; 
    } 

    iframe { 
     width: 100%; 
     height: 100%; 
    } 


    @media (max-width:767px) { 

     .vimeo-standard { 
      float: none; 
      width: 80%; 
      margin: 0 auto; 
      padding-bottom: 10px; 
     } 
    } 

    .clearfix:before, 
    .clearfix:after { 
     content: " "; /* 1 */ 
     display: table; /* 2 */ 
    } 

    .clearfix:after { 
     clear: both; 
    }