在给左右边距后，如何使 div 填充整个可能的宽度？

Question

我正在尝试让 div 在其边距生效后填充可能的位置。

例如，如果屏幕宽度为 200，并且 class 声明如下：

.mini_video {
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

mini_video可以有 160px 的宽度并且在中间吗？

如果它可以以任何方式帮助我，我也在使用 Bootstrap。

Answer 1

我会为这个用例使用填充。 您可以使用外部容器并为视频添加填充。 视频上的对象适合允许它逐渐缩放。

.mini_video-container {
  width: 100%;
  padding: 0 20px;
  max-width: 1000px;
  background-color: orange;
}
video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: fill;
}

https://codepen.io/jeffteachestheweb/pen/abJVNjg

Answer 2

您可以添加max-width: 100%; 而不是width: 100%;

.mini_video {
  max-width: 100%;
  margin-left: 20px;
  margin-right: 20px; 
}

看看那个例子

 * { margin: 0; padding: 0; box-sizing: border-box; }.mini_video { max-width: 100%; margin-left: 20px; margin-right: 20px; border: 1px solid #000; text-align: center; }

 <div class="mini_video">Hello World</div>