html - div タグは、横に並べる必要がある場合にネストされたようにレンダリングされます

Question

ネストされた DIV タグのシステムをセットアップしようとしていますが、奇妙な問題が発生します。ブラウザーにロードすると (OS X の Safari、Chrome、および FF でテスト済み)、最も内側の 2 つの div が互いにレンダリングされます。

このフィドルを参照してください: http://jsfiddle.net/m48wG/

問題の DIV は、クラス「l4」の最も明るい灰色のものです。ソースコードでは、次のようになります。

<div class="box box-horizontal l4" style="width:100px;height:100px;"></dix>
<div class="box box-horizontal l4" style="width:100px;height:100px;margin-left:3px;"></dix> 

しかし、ブラウザーのインスペクターで要素を調べると、次のようになります。

<div class="box box-horizontal l4" style="width:100px;height:100px;">
   <div class="box box-horizontal l4" style="width:100px;height:100px;margin-left:3px;"></dix>
</dix>  

これを引き起こしている原因と、それを修正する方法はありますか?

ありがとう

編集：ハハ..ごめんなさい、悪い！みんなありがとう、私はそれをまったく見ていませんでした..

Answer 1

に正解すれ</dix>ば</div>大丈夫です

すぐに表示されない場合は、変更してください

<div class="box box-horizontal l4" style="width:100px;height:100px;"></dix>

に

<div class="box box-horizontal l4" style="width:100px;height:100px;"></div>

他の間違ったdivも同様です。

Answer 2

終了タグのタイプミスです。 </dix>する必要があります</div>