在这种情况下,我正在尝试创建一些东西,让我可以在图像之上放置一些东西,小图像。
基本上,它是这样的,两个主要的 div 都居中:
http://jsmith.elementfx.com/images/questions.png
蒂亚。
对不起,这是
HTML
<div id="container">
<div id="left"><a href=""><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></a></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><a href=""><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></a></div>
<div id="rightimage"><h2>434</h2></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
}
#right {
margin-right:15px;
}
#rightimage{
position:absolute;
padding-top:2px;
width:65px;
}
最佳答案
你必须使用 z-index
和 position
来实现它,
HTML
<div id="container">
<div id="left"><a href=""><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></a></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><div id="rightimage"><h2>434</h2></div><a href=""><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></a></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
z-index:1;
}
#right {
position:relative;
margin-right:15px;
}
#rightimage{
margin-left:175px;
position:absolute;
z-index:1000;
}
关于css - 2 个居中 div 之上的 2 个 float div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22163792/