两串一模一样的代码，运行结果不一样

初学者，在学习div+css的用法，照着教程的代码打了一遍，但是运行结果却不同

教程代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV+CSS</title>
    <style type="text/css">
        #Container{
            width:1000px;
            margin: 0 auto;
            background:#CF3;
        }
        #Header{
            height:80px;
            background:#093;
        }
        #logo{
            padding-left:50px;
            padding-top:20px;
            padding-bottom:50px;
        }
        #Content{
            height:600px;
            margin-top:20px;
            background:#0FF; 
        }
        #Content-Left{
            height:400px;
            width:200px;
            margin:20px;
            float:left;
            background:#90C;
        }
        #Content-Main{
            height:400px;
            width:720px;
            margin:20px;
            float:left;
            background:#90C;
        }
        #Footer{
            height:40px;
            background:#90C;
            margin-top:20px;
        }
        .Clear{
            clear:both;
        }
    </style>
</head>
<body>
<div id="Container">
    <div id="Header">
        <div id="logo">
            这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。
        </div>
    </div>
    <div id="Content">
        <div id="Content-Left">Content-Left</div>
        <div id="Content-Main">Content-Main</div>
    </div>
    <div class="Clear">
    </div>
    <div id="Footer">
    Footer
    </div>
</div>
</body>
</html>

运行结果如下图

我自己打的代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV+CSS</title>
    <style type="text/css">
        #Container{
            width: 1000px;
            margin: 0 auto;
            background: #CF3;
        }
        #Header{
            height: 80px;
            background: #093;
        }
        #logo{
            padding-left: 50px;
            padding-top: 20px;
            padding-bottom:50px;
        }
        #Content{
            height: 600px;
            margin-top: 20px;
            background: #0ff;
        }
        #Content-Letf{
            height: 400px;
            width: 200px;
            margin: 20px;
            float:left;
            background: #90C;
        }
        #Content-Main{
            height: 400px;
            width: 720px;
            margin: 20px;
            float:left;
            background: #90C;
        }
        #Footer{
            height: 40px;
            background: #90C;
            margin-top: 20px;
        }
        .Clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div id="Container">
        <div id="Header">
            <div id="logo">
                这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。
            </div>
        </div>
        <div id="Content">
            <div id="Content-Left">Content-Left</div>
            <div id="Content-Main">Content-Main</div>
        </div>
        <div class="Clear">
        </div>
        <div id="Footer">
            Footer
        </div>
    </div>
</body>
</html>

运行结果如下图

代码一样的啊，但是Content-Left这里不对，我找不到哪里有错误，是哪里出错了呢？

找个比较工具比对一下代码，省时省力。
比如beyond compare、vimdiff

比较结果：很明显的拼写错误啦。

#Content-Letf{

拼写错误

id名写错了。教程里是#Content-Left，你的是#Content-Letf。

【热门文章】