Question

我有以下HTML代码：

<div id="divFather" class="clsFather">
    <div class="clsSon">
        <img src="A.png">
        <img src="B.png">
    </div>
    <div class="clsSon">
        <img src="A.png">
        <img src="B.png">
    </div>
</div>

这是.css文件：

.clsSon{
float: left;
width: 50%;
text-align: center;
position: relative;}

.clsSon img{
position: absolute;
top: 0px;
left: 0px;}

有了这个，我试图在一行中有两个div，每个div中有两个重叠的图像。但不是这样，我只在一个地方重叠四张图片。我希望在两行div的一行中获得2 + 2个重叠图像。我怎么能得到它？

Answer 1

像这样？

.clsSon {
  float: left;
  height: 160px;
  width: 160px;
  text-align: center;
  position: relative;
}

.clsSon img {
  position: absolute;
  top: 0px;
  left: 0px;
}

<div id="divFather" class="clsFather">
    <div class="clsSon">
        <img src="http://source.unsplash.com/160x160">
        <img src="http://source.unsplash.com/160x160/?mountain">
    </div>
    <div class="clsSon">
        <img src="http://source.unsplash.com/160x160">
        <img src="http://source.unsplash.com/160x160/?mountain">
    </div>
</div>

Answer 2

最后，我能够以这种方式做到这一点：

.clsSon{
float: left;
text-align: center;
position: relative;
height: 160px;
width: 50%;}

.clsSon img{
position: absolute;
margin: auto;}

在两个不同的div

2 个答案: