在給左右邊距后，如何使 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>