Question

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

我想让第一个成为100％（不是900px，而是与屏幕一样大）。

这可能吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

.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>

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

4 个答案: