A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

写了个很简单的代码,想要的三个并排的彩色块,出来的结果却不是我想要,请教下大家。。。我用的是win8系统IE11浏览器和火狐32浏览器,但结果都一样,结果如图所示
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>

  6. <style type="text/css">

  7. #div_1id{ background-color:#F00;
  8.                 border:1px;
  9.                 width:50px;
  10.                 height:50px;
  11.                 loat:left;
  12.                 }
  13. #div_2id{background-color:#0F0;
  14.                 border:1px;
  15.                 width:60px;
  16.                 height:60px;
  17.                 float:left;
  18.                                 }
  19. #div_3id{background-color:#00F;
  20.                 border:1px;
  21.        
  22.                 width:70px;
  23.                 height:70px;
  24.                 }
  25. </style>
  26. </head>

  27. <body>
  28. <script type="text/javascript">
  29. document.write(navigator.appVersion);


  30. </script>
  31. <hr/>


  32. <div id="div_1id"></div>
  33. <div id="div_2id"></div>
  34. <div id="div_3id"></div>
  35. </body>
  36. </html>
复制代码





QQ图片20141012025821.png (62.43 KB, 下载次数: 13)

QQ图片20141012025821.png

6 个回复

倒序浏览
13行的float属性写错了,第三个div也需要加一个float=“left”
回复 使用道具 举报
本帖最后由 hi2hcs 于 2014-10-12 09:21 编辑

13行那个load应该是float,应该是在反复修改中改掉,改过后结果是这样的,如图,没有出现并排的情况

360截图20141012091655324.jpg (19.56 KB, 下载次数: 20)

360截图20141012091655324.jpg
回复 使用道具 举报
化学反应 发表于 2014-10-12 09:03
13行的float属性写错了,第三个div也需要加一个float=“left”

13行那个load应该是float,应该是在反复修改中改掉,改过后结果是这样的,如图,并没有出现并排的情况

360截图20141012091655324.jpg (19.56 KB, 下载次数: 7)

360截图20141012091655324.jpg
回复 使用道具 举报
兄弟不告诉你了吗,你定义了三个div,第三个div也要加上float=“left”属性。
回复 使用道具 举报
<style type="text/css">

#div_1id{ background-color:#F00;
                border:1px;
                width:50px;
                height:50px;
               float: left
                }
#div_2id{background-color:#0F0;
                border:1px;
                width:60px;
                height:60px;
                float: left
                }
#div_3id{background-color:#00F;
                border:1px;
                width:70px;
                height:70px;
                float: left
                }

</style>
回复 使用道具 举报
哥们你怎么学起来html了,你是不是已经在黑马学习了,我还在准备,入学流程里也没有要求学习html呀?
最近就要申请面试,有些敏感。可以的话交流一下,谢谢了。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马