css - 2 个居中 div 之上的 2 个 float div

Question

在这种情况下，我正在尝试创建一些东西，让我可以在图像之上放置一些东西，小图像。

基本上，它是这样的，两个主要的 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;
}   

Answer 1

你必须使用 z-index 和 position 来实现它，

DEMO

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;
}