在我的代码中,我试图能够像这样堆叠图像
其中有 2 张图片在后面,一张在上面。
我试过使用 float 和 z-index
Question how can I get it so my images are like in the above example?
正在工作 DEMO <-- 更新了工作解决方案
<div class="container">
<div class="row">
<div class="col-lg-12">
<img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1">
<img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2">
<img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3">
</div>
</div>
</div>
CSS
.img-1 {
z-index: 2;
float: none;
clear: both;
}
.img-2 {
float: left;
z-index: 1;
}
.img-3 {
float: right;
z-index: 1;
}
最佳答案
这是另一种解决方案:
.img-1 {
display: block;
position: absolute;
left: 0;
top: 30px;
z-index: -1;
}
.img-2 {
display: block;
position: absolute;
top: 30px;
right: 0;
z-index: -1;
}
.img-3 {
display: block;
position: relative;
z-index: 1;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1">
<img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2">
<img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3">
</div>
</div>
</div>
关于html - 堆叠一些图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40875381/