如果我把div放在另一个div中,它会工作吗?

时间:2017-09-02 14:33:57

标签: html css html5

div是否在另一个div内部工作?如果是这样,我该怎么做CSS?我刚刚开始这样做,所以我不太确定。

2 个答案:

答案 0 :(得分:1)

是的,div里面的div工作。基本上这就是设计了多少网页。看一下Wikipedia的来源。堆积的divs ......

那么为什么要嵌套<div>?例如,您不希望您的页面超出屏幕的整个宽度,但您希望它居中并且左右两侧有一些空白。你会做类似

的事情
<div class="outside" style="width: 80%; margin: 0 auto;">
    Some content...
</div>

但是你想在outside div中设置内容的样式。再一次,你需要div ...... 将div视为乐高积木:你用乐高积木制作一个房子,但你也用乐高积木装饰房子的内部。同样在这里,只需用<div>代替LEGO块。最后你可能得到这样的东西:

<div class="outside" style="width: 80%; margin: 0 auto;">
    <div style="width:100%; margin-top: 20px;">
        <a href="http://www.google.com">
           <img src="google_logo.jpg" />
        </a>
        <p>Click on image and see what happens...</p>
        <div ...>
           ...
        </div>
    </div>
</div>

可能是一个糟糕的例子,但只是为了给你一个想法......

答案 1 :(得分:1)

根据MDN

  

HTML <div>元素
  Content categoriesFlow content,可触及的内容   允许的内容Flow content

这意味着您可以将任何具有当前内容类别的元素放入允许此内容类别元素内部的元素中。

例如:

&#13;
&#13;
div {
  padding: 20px;
  background-color: yellow;
}

div div {
  background-color: red;
}
&#13;
<div>
  Main div
  <div>Child div</div>
</div>
&#13;
&#13;
&#13;

您可以对其他一些元素执行相同操作,只需在MDM HTML element reference之前检查HTML 5 specification即可。您也可以尝试HTML 5 Validator