Question

我有以下HTML页面（see jsfiddle），其中包含一个包含三个子div的父div。我期待看到三个div一个接一个。相反，我看到每个孩子div都包含在其兄弟中。

我的网页HTML包含以下内容：

<div id="div1">
    <div id="div11" />
    <div id="div12" />
    <div id="div13"/>
</div>

然而，当我做“Inspect element”（在IE和Chrome中）时，我得到了这个：

<div id="div1">
    <div id="div11">
        <div id="div12">
            <div id="div13"></div> 
        </div>
    </div>  
</div>

这个标记出了什么问题？

Answer 1

<div>元素在HTML4或HTML5中不能自动关闭;你需要为每一个添加一个结束标记。因此：

<div id="div1">
    <div id="div11" />
    <div id="div12" />
    <div id="div13"/>
</div>

应该是这样的：

<div id="div1">
    <div id="div11"></div>
    <div id="div12"></div>
    <div id="div13"></div>
</div>

浏览器将填写缺少的结束标记，这就是为什么你有嵌套结构 - 浏览器假定树应该嵌套并适当地关闭标记。

您始终可以通过HTML验证程序（例如http://validator.w3.org）运行代码，以检查此类简单错误。

Answer 2

Div 是一个开关标签。您应该像在父 div 中一样使用兄弟姐妹指定开放标记<div>。这里是正确的标记

<div id="div1">

  <div id="div11">
  </div><!--end div11-->

  <div id="div12">
  </div><!--end div12-->

  <div id="div13">
  </div><!--end div13-->

</div><!--end parent div-->

HTML页面嵌套兄弟div

2 个答案: