0

好的，首先这是我在 Stackoverflow 上的第一个问题，也是有史以来第一个问题……我两个月前开始学习 Web 开发，我学习了 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 上制作了一支钢笔，以更好地向您展示我的意思... http://codepen.io/Avisaac/pen/DgIzi 这应该是唯一的结果，只有灰色的 div 应该在红色的 div 和红色 div 的底部，我也希望红色 div 在包装器内居中。[请注意，包装器也应该具有居中的能力，因为它是我的网站的主要内容区域居中。

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

4

2 回答 2

0

高度和宽度不匹配。尝试向包装器的高度添加更多，它只有 350 像素，但如果添加其他两个 div 的高度，它是 400 像素。

于 2013-09-15T14:44:02.583 回答
0

正如@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;
}

这个的另一个小提琴：这里

于 2013-09-15T14:38:07.107 回答