HTML-страница вложенных sibling divs

Question

У меня есть следующая HTML-страница (see jsfiddle), которая содержит родительский div с тремя дочерними div. Я ожидаю увидеть три divs один рядом с другим. Вместо этого я вижу, что каждый дочерний div содержится внутри своего брата.

Моя веб-страница HTML содержит следующее:

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

однако, когда я "Проверить элемент" (в обоих 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-->