html - 如何将视频和图像直接插入父级宽度的一半？

我想把视频和图像放在一起，两者都是父母的50%。下面是我试过的代码。在我看来，每个包装div应该是内联的，50%；子元素填充宽度。
HTML格式：

<div>
   <div class="video-container">
    <video poster="Resources/css/img/ioposter.png" controls="true" muted loop>
        <source src="/Resources/img/vid.mp4"  type="video/mp4">
        Your browser does not support the video tag.
    </video>
   </div>
   <div style="width:50%;display:inline-block;">
     <img style="width:100%;" src="Resources/myimg.jpg">
   </div>
</div>

CSS:

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 0px;
   height: 0;
   overflow: hidden;
   display: inline-block;
   width:50%;
   vertical-align: top;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

最佳答案

我已经创建了一个用于测试的快速jsfiddle：https://jsfiddle.net/L5euvkzm/2/

.wrapper {
    font-size: 0;
}

我所做的只是将一个类添加到外部div，然后应用字体大小：0；这样做的原因是两个容器之间添加了空格。有其他的方法可以解决这个问题，但我更喜欢这种方法，使元素彼此很好地堆叠在一起。

关于html - 如何将视频和图像直接插入父级宽度的一半？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49762490/