css - 在另一个 div 之上创建一个 div 索引，并且两者都在包装器中

Question

好的，首先，这是我在 Stackoverflow 上提出的第一个问题，也是有史以来的第一个问题......我两个月前开始学习网络开发，我学习了 HTML CSS 和大部分 JS 以及一些 jQuery ...我从来没有做过任何实际的事情或进行过实验，但现在我正在尝试让我的第一个元素开始练习..

所以我有这个包装 div，里面还有两个 div，一个是主要内容 div，在它下面应该是另一个 div，它有一个漂亮的白色 img，可以与整个网站背景融为一体。问题是我无法让第二个 div 位于主 div 之下和包装 div 之内。我已经在代码中简化了它...请告诉我该怎么做...谢谢，对不起，如果我的英语让你打自己的脸:)

HTML

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

CSS

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

编辑:我在 CodePen 上做了一个 Pen 来向你展示我的意思更好...... http://codepen.io/Avisaac/pen/DgIzi这应该是结果，只有灰色 div 应该在红色 div 的下面和红色 div 的底部，我也希望红色 div 在包装内居中。 [请注意包装器也应该具有居中的能力，因为它是我网站的主要内容区域居中。

我还附上了我从显示器上取下的 prtScr 以更好地解释:白色方 block 是主要内容(意思是#first)底部的白色渐变是包含此渐变的第二个div(#second)。主要内容应该在渐变之上，以便主要内容与图案背景融合。希望我说得更清楚 http://img841.imageshack.us/img841/2882/qg6j.jpg

Answer 1

高度和宽度不匹配。尝试增加包装器的高度，它只有 350 像素，但如果你添加另外两个 div 的高度，它就是 400 像素。