无法在重叠图像下方对齐文本

Question

我正在尝试让文字显示在我重叠的图像下方。我有两个要投票的并排图像，因此 "VS" 图像与中间的其他两个图像重叠，效果很好。但是，当我尝试让文本显示在要投票的每张图片下方时，它似乎显示在图片后面的顶部，而不是通常情况下显示在下方。

这是它目前所做的代码笔：

html:

 <div align="center">
 <div id="vs">
 <a href=""><img id="png1" src="/puppies/8.jpg" /></a><p
 class="left">username<br>Description<br>Puppies name</p>
 <img id="png2" src="/images/vs.png" /> 
 <a href=""><img id="png3"  src="/puppies/8.jpg" /></a><p
  class="right">username<br>Description<br>puppies name</p>
 </div>
 </div>

 css:

#png1 {
position:absolute;
top:30px;
left:0;
z-index:0;
}

#png2 {
position:absolute;
top:100px;
left:260px;
z-index:1;
}
#png3 {
position:absolute;
top:30px;
left:315px;
z-index:0;
}
#vs{
position: relative;
width: 620px;
height: 310px;
}
p.left{
 position:absolute;
top:315px;
left:0px;
z-index:4;
text-align:left;
}
p.right{
 position:absolute;
top:315px;
left:315px;
z-index:4;
text-align:left;

}

Answer 1

我想我明白你想要做什么。你的设置不是最好的。我修改了 HTML/CSS，这是你想要的吗：

http://codepen.io/anon/pen/pJMeGr

a{
  display: inline-block;
  vertical-align: top;
  position: relatve;
  z-index: 9;
}
img{
  display: inline-block;
  border: 1px solid #333;
}
.left{
  margin-right: -15px;
}
.right{
  margin-left: -10px;
}
#vs{
  text-align: center;
}
.vs{
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 10;
  border: 1px solid #000;
  margin-top: 8px;
}

<div>
  <div id="vs">
    <a class="left" href="#"><img src="http://placehold.it/120x120" />
      <br>puppies name
      <br>username
      <br>Description
    </a>

    <img class="vs" src="http://placehold.it/100x100" />

    <a class="right" href="#"><img src="http://placehold.it/120x120" />
      <br>puppies name
      <br>username
      <br>Description
    </a>
  </div>
</div>

无法在重叠图像下方对齐文本

Can not align text undeneath overlapping images

html

css

image

css-float