图片无缝排列的简单实现方法
本帖最后由 马黑黑 于 2025-2-15 10:46 编辑使用父元素的 scroll 方法翻滚元素内部的图片，需要精准计算翻滚的距离（父元素的宽或高），这样才能令图片翻到父元素时占满父元素的地儿。为此，图片需要无缝衔接，不论是横排还是竖排。
先说横排。IMG标签属于行内标签，其display属性缺省时默认使用 inline 值。当父元素宽高固定并让图片按100%存放其内时，若只是一张图片，那它正好占满整个父容器，但是如果放置多张图片且禁止溢出（overflow: hidden;）和折行（white-space: nowrap;），那么图片就会横向排列，两两之间有一点间隔，这点间隔是占地的，会直接影响 scroll() 所需参数的计算，需要消除掉，简单的做法是，父元素加入 font-size: 0; 属性和值，就是字体大小为0即可。
再说竖排。父元素同样需要防止溢出，但要允许折行（默认，不要 white-space: nowrap; 属性即可），父元素加入属性值 line-height: 0; ，这是设置行高。然后，IMG标签末尾使用 <br> 标签折行，这样纵排结果上下之间就是无缝的。
除了上述介绍的，图片之间无缝排列还有很多实现手段和技巧，有余力的朋友可以自行网搜学习。
咋不用那几位来演示一吓{:4_189:} 谢谢黑黑老师，学习了！ 太好了，欣赏。 樵歌 发表于 2025-2-15 08:42
咋不用那几位来演示一吓
又想看镁铝了？ 梦江南 发表于 2025-2-15 08:42
谢谢黑黑老师，学习了！
{:4_190:} 庶民 发表于 2025-2-15 08:43
太好了，欣赏。
{:4_191:} 原来是这样保证无缝衔接的，学习了{:4_187:} 红影 发表于 2025-2-15 11:00
原来是这样保证无缝衔接的，学习了
方法好多种的 很实用的介绍，可编入代码词典的 花飞飞 发表于 2025-2-15 11:42
很实用的介绍，可编入代码词典的
这词典目前拼多多没有卖 马黑黑 发表于 2025-2-15 11:45
这词典目前拼多多没有卖
黑氏出品，正在编纂{:4_173:} 花飞飞 发表于 2025-2-15 11:49
黑氏出品，正在编纂
没这个工夫 马黑黑 发表于 2025-2-15 11:50
没这个工夫
{:4_181:}有那工夫不如抽支烟惬意 花飞飞 发表于 2025-2-15 11:56
有那工夫不如抽支烟惬意
那是 马黑黑 发表于 2025-2-15 10:35
又想看镁铝了？
你说呢{:4_189:} 马黑黑 发表于 2025-2-15 11:39
方法好多种的
从黑黑的介绍里先学这种{:4_187:} 红影 发表于 2025-2-15 15:45
从黑黑的介绍里先学这种
自己能接受、用起来方便的就行 樵歌 发表于 2025-2-15 14:33
你说呢
应该的 马黑黑 发表于 2025-2-15 17:36
自己能接受、用起来方便的就行
是的，而且用熟一个再去学别的比较好。