javascript - 是否可以使容器内的元素大于容器？

Question

假设我有一个宽度为 900px 的容器，里面的所有帖子都是 900px。

我想让第一个成为 100%(不是 900px 但和屏幕一样大)。

这可能吗？

#container { width: 900px; background: red; }
.post { width: 900px; height: 50px; background: yellow; margin: 0 0 10px;  }
.post:first-child { background: green; }

<div id="container">
  <div class="post">Post 1</div>
  <div class="post">Post 2</div>
  <div class="post">Post 3</div>
</div>

Answer 1

对于给定的样式，100% 的宽度将与您的容器 一样宽，因此您可以使用 viewport units ，例如

.post:first-child { width : 100vw; }

(1vw 等于视口(viewport)宽度的 1%)