时间戳

首页 > 解决方案 > 右对齐 div 内的视频元素

html - 右对齐 div 内的视频元素

问题描述

我正在尝试右下对齐 div 内的视频元素。以下是我迄今为止实现的将视频元素与底部对齐但如果潜水容器无法将其移至右侧的代码：

video {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}
<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex align-self-end justify-content-md-end align-items-md-end" width="200" height="100" controls="" style="background-color: #e6e4e4;" preload="none" autoplay="" loop=""></video></div>

请建议我应该把它放在一个跨度内吗？

标签： htmlcss

解决方案

我认为如果你只是添加 flex-direction: row-reverse到你的 d-inline-flex 类，你应该得到你想要的结果。

由于您发布的 css 是空的且重复的，因此我从代码段中删除了这些类。我还将视频中的内联样式放入视频 css 类中，只是为了整理代码。

希望这可以帮助

ps刚刚注意到您问题的“底部”部分。使用 flex-end 对齐项目会将视频定位在底部（我以为你想要它在顶部）..

//在右下角

.d-inline-flex {
  display: flex;
  flex-direction:row-reverse;
  background-color: #141414;
  height: 400px;
  width: 100%;
}

video {
  width: 200px;
  height: 100px;
  background-color: #e6e4e4;
  justify-content:center;
  align-self:flex-end;
  align-content:flex-end;

}
<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex" controls="" preload="none" autoplay="" loop=""></video></div>

//在右上角 

.d-inline-flex {
  display: flex;
  flex-direction: row-reverse;
  background-color: #141414;
  height: 400px;
  width: 100%;
}

video {
  width: 200px;
  height: 100px;
  background-color: #e6e4e4;
  display: flex;
  justify-content: center;
}
<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex" controls="" preload="none" autoplay="" loop=""></video></div>

推荐阅读