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/

EDIT 道歉。它一直在努力。我正在使用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没有什么问题..

Answer 2

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

感谢您的帮助

子div被放置在父div的顶部与图像

2 个答案: