当图片较少的时候,在一个div中排版如下(正常情况):
当图片较多的时候,在一个div中排列的时候,怎么做到如下(后面的图片自动覆盖前面的图片):
只用css构建能实现不?
当图片较少的时候,在一个div中排版如下(正常情况):
当图片较多的时候,在一个div中排列的时候,怎么做到如下(后面的图片自动覆盖前面的图片):
只用css构建能实现不?
能覆盖说明脱离了文档流,排除 float ,absolute 定位可以,按百分比分配 left,但百分比得按个数计算。
如果个数固定的可以用 Sass 等生成,动态用 JS 计算。
补:
@cool_zjy 的 workaround 思路很不错,值得参考。
如果需要半透明的话可以参考回这个方法,也写了个小 Demo。
2 回答852 阅读✓ 已解决
4 回答944 阅读✓ 已解决
2 回答1.2k 阅读✓ 已解决
2 回答1k 阅读✓ 已解决
2 回答2.6k 阅读
2 回答1.6k 阅读
1 回答1k 阅读✓ 已解决
反对 @CRIMX 的答案
所谓的「覆盖」只是视觉上展示的效果,而不是布局中真实的覆盖,所以并不一定必须脱离文档流进行层叠,更何况不脱离文档流简单使用 relative position 也可以实现覆盖。
这个问题中的布局要求如果使用 Flex 的话可以比较方便的解决,详细的实现直接上 DEMO:
https://codepen.io/cool_zjy/p...