html - 将带有图像的子 div 放置在父 div 的顶部

Question

我试图将一个子 div 放在其父 div 的顶部(包括其内容)

<div id="footer">
  <div id="footer-container">
    <div id="icon"></div>                    
  </div>    
</div>​

#footer {
    height:50px;
    border-top:3px #666 solid;
    margin-top:50px;
}

#footer-container {
    height: 30px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -15px;   
}

#icon {
    height:30px;
    width:30px;
    background-color:#666;

}​

现在，如果 <div id="icon"> 的内容有效是文本，但如果您在 div 中放置背景图像，则它不会。有什么办法可以使这项工作？这也许可以更好地解释 http://jsfiddle.net/4QxL7/

编辑 道歉。它一直在工作。我将 PNG 用于中间有“空白”的图像，这使得父 div 中的边框(颜色相同)看起来像是越过子元素的顶部，实际上它是落后。

谢谢你的帮助

Answer 1

我刚刚尝试了两种方法，它们都使用我网站上的超大图片...

<div id="footer">
        <div id="footer-container">
            <div id="icon"><img src="image url here" width=30 height=30/></div>                    
        </div>    
    </div>​

http://jsfiddle.net/ZkxSM/

和

#icon {
    height:30px;
    width:30px;
    background-color:#666; /*unnecessary now probably...*/
    background:url('image url here');
}​

http://jsfiddle.net/b6QyX/ (图像需要事先调整大小才能正常工作……或者可以在 div 的 html 中设置宽度和高度)

您的 jsfiddle 实际上没有任何问题..