是否可以使容器内的元素比容器更大？

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

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

说明：将框向左移动（负

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;
  position: relative;
  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 2

使用给定的样式，

100%

的宽度将与您的

container

一样宽，因此您可以使用视口单位，例如

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

（

1vw

等于视口宽度的 1%）

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>