Css 在另一个div上面创建一个div索引，这两个div都在包装器中

好的，首先这是我关于Stackoverflow的第一个问题，也是有史以来第一个问题。。。 我两个月前开始学习web开发，我学习了HTML CSS和大部分JS以及一些jQuery。。。 我从来没有做过任何实际的事情或实验，但现在我正试图做我的第一个项目，开始练习

所以我有这个包装div，里面我还有两个div，一个是主内容div，下面应该是另一个div，它有一个漂亮的白色img来与整个网站背景融合。 问题是我不能让第二个div位于main div下和wrapper div内。我在代码中对此进行了简化。。。请让我知道怎么做。。。 如果我的英语让你撞到了自己的脸，那就表示感谢和抱歉：）

HTML

<div class="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>

编辑： 我在CodePen上做了一支笔，让你更好地了解我的意思。。。 这应该是结果只有灰色的div应该在红色div的下面和红色div的底部，我还希望红色div在包装内居中。请注意，包装器也应该具有居中的功能，因为它是我的站点的主要内容区域

我还附上了我从显示器上取下的prtScr，以便更好地解释： 白色正方形是主要内容（意思是#第一）底部的白色渐变是包含此渐变的第二个div（#第二）。主要内容应该在渐变上，以便主要内容与图案背景混合。希望我能说得更清楚

---

正如@DevlshOne所提到的，如果你的下的均值是重叠的试试以下方法：

.wrapper {
    width:350px;
    height:350px;
    background-color:black;
    margin: 0 auto;
    position: relative;
 }

 #first{
     width:250px;
     height:300px;
     background-color: white;
     margin: 0 auto;
     position: absolute;
     top: 0; left: 0;
 } 
 #second{
     width:350px;
     height:100px;
     background-color: gray;
     position: absolute;
     top: 0; left: 0;
 }

为这件事提琴：

但如果你的平均值是一个在顶部，另一个在底部，试试这个

.wrapper {
    width:350px;
    height:350px;
    background-color:black;
    margin: 0 auto;
    overflow: hidden /* or scroll or auto */
}
#first {
    width:250px;
    height:300px;
    background-color: white;
    margin: 0 auto;
} 
#second{
    width:350px;
    height:100px;
    background-color: gray;
}

---

另一把小提琴：高度和宽度不匹配。

---

尝试增加包装器的高度，它只是350px，但是如果你加上另外两个div的高度，它是400px。

通过“under”你的意思是重叠的还是物理上在下面的？两个盒子叠在一起还是一个盒子由两层组成？第一层和第二层的高度加起来是400px，但是.wrapper只有350px。这是需要的吗？你能提供一个JSFIDLE.net吗？我想出了一个看起来几乎是“U”的布局-两边有两个黑色立柱和一个灰色的页脚。有人能帮忙吗？我已经试着把问题说得更清楚了。到目前为止，我得到的答案对我没有帮助。。。

.wrapper {
    width:350px;
    height:350px;
    background-color:black;
    margin: 0 auto;
    overflow: hidden /* or scroll or auto */
}
#first {
    width:250px;
    height:300px;
    background-color: white;
    margin: 0 auto;
} 
#second{
    width:350px;
    height:100px;
    background-color: gray;
}