2

私は現在、HTMLを使用してゲームデザインを学んでいFoundation Game Design with HTML5 and JavaScript By Rex van der Spuyます。ポジショニングの章には、3つの空のdivを内部に持つdivを作成するためのHTMLおよびCSSコードがあります。次に、これら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ページと同じフォルダにあります。Webからいくつか試してみましたが、最後にダミーのdivを追加し、親のdivclear: bothを設定するほどうまくいきませんでしたが、何も機能していないようです。overflow画面上部の空の行（親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 に答える