在2个居中的div上面有2个浮动div

Question

我正在尝试制作一些可以让我在这种情况下放置图像的东西，小图像。

基本上，它是这样的，两个主要的div都集中在一起：

http://jsmith.elementfx.com/images/questions.png

TIA。

对不起，这是

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

Answer 2

使用此代码，图像的宽度和高度的计算将根据您的图像：

<强> HTML

<div class="container">
    <div class="img1">
        <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
    </div>
    <div class="img2">
        <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
    </div>
</div>

<强> CSS

.container{
    width:270px;
    margin:0 auto;
    overflow:hidden;
}
.img1,.img2{
    width:128px;
    height:128px;
    background:url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png);
    float:left;
    margin-right:10px;
    border:1px solid #000;
}
.img2{margin:0;}

DEMO jsfiddle for this

Answer 3

Demo Fiddle - Quad view with 3 layered images

<div class="container start">

    <img src="http://www.placehold.it/300/555555"></img>

    <div id="base1" class="base">

        <img src="http://www.placehold.it/200/654321"></img>

        <div id="overlay1" class="overlay">

            <img src="http://www.placehold.it/100/123456"></img>

        </div>

    </div>

</div>

---

.base {
    width: 200px;
    height: 200px;
    position: relative;
    top: -290px;
    left: 10px;
}

.overlay {
    width:100px;
    height:100px;
    position: relative;
    left: 10px;
    top: -190px;
}

.container {
    left:100px; 
    width: 300px;
    height: 300px;
    margin: 10px;
    float: left;
}

.start {
    clear: left;
}