2

我目前正在学习HTML使用Foundation Game Design with HTML5 and JavaScript By Rex van der Spuy. 在定位章节中，有 HTML 和 CSS 代码来创建一个 div，其中包含三个空 div。然后，这 3 个空 div 中的每一个都有一个background-image并加载图像。

但是，我似乎没有得到相同的结果。这是我的代码，类似于书中的代码： 

<!doctype html>
<html>
    <title> Margins and Padding </title>
    <style>
      #stage{
        display: block;
        width: 600;
        height: 600;
        border-style: dotted;
        border-width: thin;
      }

      .content{
        width: 100;
        height: 100;
        float: left;
      }

      #image1{
        background-image: url("1.jpg");
      }
      #image2{
        background-image: url("2.jpg");
      }
      #image3{
        background-image: url("3.jpg");
      }
    </style>

  <body>
    <div id="stage">
      <div class="content" id="image1"></div>
      <div class="content" id="image2"></div>
      <div class="content" id="image3"></div>
    </div>
  </body>
</html>

这些图像与 HTML 页面位于同一文件夹中。我从网上尝试了一些东西，但没有什么能像在最后添加一个虚拟 divclear: both并设置overflow父 div 一样有效，但似乎没有任何效果。我得到的只是屏幕顶部的一个空行（父 div）。这本书说应该加载图像（甚至给出打印屏幕）

请告诉我出了什么问题

4

3 回答 3

2

您缺少宽度和高度的单位。尝试这个：

  #stage{
    display: block;
    width: 600px;
    height: 600px;
    border-style: dotted;
    border-width: thin;
  }

  .content{
    width: 100px;
    height: 100px;
    float: left;
  }
于 2013-03-07T19:23:05.800 回答
2

您需要在高度和宽度样式声明中添加单位。“高度：100px；” 或“身高：100%；” 例如。

于 2013-03-07T19:24:40.897 回答
1

您需要指定宽度和高度的单位。我不得不承认，除了“px”之外，我从来没有使用过任何像素。

  #stage{
    display: block;
    width: 600px; <---
    height: 600px;  <---
    border-style: dotted;
    border-width: thin;
  }

  .content{
    width: 100px;  <---
    height: 100px;  <---
    float: left;
  }
于 2013-03-07T19:25:37.360 回答