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

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%将与您的container一样宽，因此您可以使用视口单位 ，例如

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

（ 1vw等于视口宽度的1％）

Answer 2

@fcalderan是正确的。 另外，我想补充一点，就是您可能有一个居中的容器，在这种情况下，您需要重新定位。

说明：将框向左移动（负负margin-left ），其值为屏幕的一半（ 50vw ）减去容器的一半（ 50% ）。 基本上：将框从其当前位置移至右侧，即，使左侧对齐页面的中心（容器宽度的+50% ），然后将其向后移至页面的一半（ -50vw ）。

 #container { width: 400px; background: red; margin: 0 auto; } .post { width: 100%; height: 50px; background: yellow; margin: 0 0 10px; } .post:first-child { background: green; width: 100vw; margin-left: calc(-1 * (50vw - 50%)); } 

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

Answer 3

尽管您可以执行此操作，但我不建议您这样做...本质上，您在调整大小和查找问题时要求各种问题。

有一些更好的选择...将柱子放在容器外面，或者只是使容器全角，并限制其他柱子的宽度。

#container { width: 100%; background: red; }
.post { width: 900px; height: 50px; background: yellow; margin: 0 0 10px;  }
.post:first-child { width: 100%; 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 4

希望这对您有用。

 #container { width: 300px; background: red; padding-top: 50px; } .post { width: 300px; height: 50px; background: yellow; margin: 0 0 10px; } .post:first-child { background: green; position: absolute; height: 50px; width: 100%; top: 0; } 

 <div id="container"> <div class="post">Post 1</div> <div class="post">Post 2</div> <div class="post">Post 3</div> <div class="post">Post 3</div> <div class="post">Post 4</div> <div class="post">Post 5</div> <div class="post">Post 6</div> <div class="post">Post 7</div> <div class="post">Post 8</div> <div class="post">Post 9</div> <div class="post">Post 10</div> <div class="post">Post 11</div> <div class="post">Post 12</div> <div class="post">Post 13</div> <div class="post">Post 14</div> </div>