背景图像不加载图像，div没有高度

我目前在使用Foundation Game Design with HTML5 and JavaScript By Rex van der Spuy在HTML学习游戏设计。在这个章节中，有HTML和CSS代码来创建一个div，其中包含三个空div。然后，这3个空格中的每一个都有一个background-image，并加载图像。背景图像不加载图像，div没有高度

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

<!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页面。我已经尝试了一些网络上的东西，但没有任何工作，像在末尾添加一个虚拟div clear: both并设置父div的overflow，但似乎没有任何工作。我所得到的是屏幕顶部的空行（父div）。书中说，图像应加载（甚至给出了一个打印屏幕）

请告诉我什么错误

来源

2013-03-07 Little Child

'width：600px;身高：600px;' – ashley 2013-03-07 19:25:21

我希望我可以接受超过1个答案，因为每个答案似乎都有帮助:) – 2013-03-07 19:28:07

你从你的宽度和高度缺失的单位。试试这个：

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

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

来源

2013-03-07 19:23:05 levelnis

完成，工作。 :)行，图像大于100x100。我设置了'width：100px'和'height：auto'，图像消失了。为什么？ :) – 2013-03-07 19:26:11

因为他们漂浮，所以他们需要一个高度 – levelnis 2013-03-07 19:26:48

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

来源

2013-03-07 19:24:40

您需要指定宽度和高度的单位。我必须承认，除了“像素”像素以外，我从来没有使用过任何东西。

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

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

来源

2013-03-07 19:25:37

背景图像不加载图像，div没有高度

回答

相关问题