Question

我正在学习如何以及何时使用div的教程。可以在这里找到该教程：

http://www.webreference.com/authoring/style/sheets/layout/advanced/index.html

我分别用class，level0，level1，level2和level3制作了四个div。像这样：

<div id="level0"></div>
<div id="level1"></div>
<div id="level2"></div>
<div id="level3"></div>

所以我正在研究div＃1。实现的第一个CSS代码基本上是在左侧和右侧设置边距。我认为我以前的一些CSS可能会有冲突，但我不知道在哪里。

正文的CSS代码是：

body
{
background-color:#FBF8EF;
margin:9px 9px 0 9px;
padding 0;
}

接下来，div＃1（或者更确切地说是div＃0）的CSS代码是：

#level0
{
background-color:#FC0;
}

我不确定我是否错误地遵循了教程，或者我只是写错了，但是如果有人可以提供帮助，那会有所帮助。如果我错过了什么，请告诉我。

感谢您抽出宝贵时间提供帮助。

Answer 1

您似乎没有按照教程并嵌套您的div：

<div id="level0">
  <div id="level1"> Level 1
    <div id="level2"> Level 2
      <div id="level3"> Level 3
      </div>
    </div>
  </div>
</div>

Answer 2

没有内容且没有设置宽度或高度的div不会占用屏幕上的空间，因此不会显示颜色。给它一些内容或尺寸。

例如： http://jsfiddle.net/HaJc4/

<div id="level0">content</div>
<div id="level1"></div>
<div id="level2"></div>
<div id="level3"></div>

Answer 3

以下是您提到的教程的完整实现。你忘记了div的嵌套，也忘记了其他div的嵌套。

这是链接：http://jsfiddle.net/WRnUv/

body
{
background-color:#FBF8EF;
margin:9px 9px 0 9px;
padding 0;
}
#level0
{
background-color:#FC0;
}
#level1 {
    margin-left:143px;
    padding-left:9px;
    background:#FFF;
}
#level2 {
    background:#FFF3AC;
}
#level3 {
    margin-right:143px;
    padding-right:9px;
    background:#FFF;
}

<div id="level0">
  <div id="level1"> Level 1
    <div id="level2"> Level 2
      <div id="level3"> Level 3
      </div>
    </div>
  </div>
</div>

与Divs的利润

3 个答案: