0

我正在尝试将子 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中的边框（相同颜色）看起来像是越过了孩子的顶部，实际上它是落后。

谢谢你的帮助

4

2 回答 2

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实际上没有任何问题..

于 2012-09-27T21:36:48.817 回答
0

道歉。它一直在工作。我对中间有“空白”的图像使用PNG，这使得父div中的边框（颜色相同）看起来像是越过了孩子的顶部，实际上它是落后。

谢谢你的帮助

于 2012-09-27T21:45:21.380 回答