Question

我目前正在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页面位于同一文件夹中。我已经尝试了一些来自网络的东西，但没有任何效果，比如在最后用clear: both添加一个虚拟div并设置父div的overflow但似乎没有任何效果。我得到的只是屏幕顶部的空行（父div）。这本书说图像应该加载（甚至给出一个打印屏幕）

请告诉我出了什么问题

Answer 1

你错过了宽度和高度的单位。试试这个：

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

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

Answer 2

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

Answer 3

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

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

  .content{
    width: 100px;  <---
    height: 100px;  <---
    float: left;
  }

background-image不加载图片，div没有高度

3 个答案: