项目中要实现一个功能,在宽度高度固定的一个div中放入几张图片,图片的高度与div的高度相等,几张图片的总长度要远远超过div的长度,那么问题来了,如何才能让用户通过手指的滑动,看到所有的图片呢?
这个可以有两种方法:
方法一:
图片的上一层父元素设置width,要大于所有图片的总宽度,最外层div宽度高度固定,共三层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#tp{
width: 90vw;
height: 30vh;
}
#tp img{
width: 30vw;
height: 20vh;
}
#kd{
width: 245vw;/*划重点*/
}
</style>
</head>
<body>
<!--固定的div-->
<div id="tp">
<div id="kd">
<img src="images/apic11412.jpg" alt="" />
<img src="images/zzpic9746.jpg" alt=""/>
<img src="images/apic11412.jpg" alt="" />
<img src="images/zzpic7320.jpg" alt="" />
<img src="images/bpic3454.jpg" alt="" />
<img src="images/zzpic9746.jpg" alt="" />
<img src="images/bpic3454.jpg" alt="" />
<img src="images/zzpic6546.jpg" alt="" />
</div>
</div>
</body>
</html>
此时,已经可以进行图片的滑动了
方法二:
在父元素上设置white-space: nowrap,保证子元素不会换行,共两层(所有浏览器都支持 white-space 属性)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#tp{
width: 90vw;
height: 30vh;
/*划重点*/
white-space: nowrap;
}
#tp img{
width: 30vw;
height: 20vh;
}
</style>
</head>
<body>
<!--固定的div-->
<div id="tp">
<img src="images/apic11412.jpg" alt="" />
<img src="images/zzpic9746.jpg" alt=""/>
<img src="images/apic11412.jpg" alt="" />
<img src="images/zzpic7320.jpg" alt="" />
<img src="images/bpic3454.jpg" alt="" />
<img src="images/zzpic9746.jpg" alt="" />
<img src="images/bpic3454.jpg" alt="" />
<img src="images/zzpic6546.jpg" alt="" />
</div>
</body>
</html>
此时,已经可以进行图片的滑动了。
这两个方法都简单但很实用!我之前用的touch事件来达到同样的效果,就比较繁琐了。