css - 如何使响应式视频嵌入与另一个 div 成排并共享相同的高度？

Question

我正在尝试将同一行中的两个分区对齐并强制它们共享相同的高度。

左侧是素材卡片 div，右侧是响应式视频嵌入。

为了使视频嵌入响应，我使用了以下样式：

.embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
    }

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

当将视频 div 包含在弹性框中时，这会使视频 div 隐藏

我试图：

1. 将它们包含在弹性行中
2. 使用的表格行/单元格 CSS

堆栈闪电战

标签： cssresponsive-designflexbox

Answer 1

使用 Angular Material Sidenav 组件

sidenav 组件旨在向全屏应用程序添加辅助内容。要设置 sidenav，我们使用三个组件：充当内容的结构容器和 sidenav，代表主要内容，代表添加的辅助内容。

堆栈闪电战