头闻号

天津市津海特种涂料装饰有限公司

船舶涂料|特种涂料|汽车涂料|防锈漆

首页 > 新闻中心 > 科技常识:在固定大小DIV层插入N个图片使其一行排列
科技常识:在固定大小DIV层插入N个图片使其一行排列
发布时间:2024-09-22 04:32:00        浏览次数:5        返回列表

今天小编跟大家讲解下有关在固定大小DIV层插入N个图片使其一行排列 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关在固定大小DIV层插入N个图片使其一行排列 的相关资料,希望小伙伴们看了有所帮助。

如何在固定大小的DIV层插入N多个图片 使其一行排列 超出层宽时出现滑动条 原以为利用overflow属性可以实现 但是测试失败。后来利用div层叠实现了效果。 HTML代码:复制代码代码如下:<!-- 如何在固定大小的DIV层插入N多个图片 使其一行排列 超出层宽时出现滑动条 --> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"content="text/html;charset=utf-8"> </head> <body> <div class="div"> <div class="div1"><img src="https://www.aidi.net.cn//css/test1.jpg"></div> <div class="div2"><img src="https://www.aidi.net.cn//css/test2.jpg"></div> <div class="div3"><img src="https://www.aidi.net.cn//css/test3.jpg"></div> </div> </body> </html>css控制样式:复制代码代码如下:.div{ width:400px; height:200px; overflow-y:hidden; position: absolute; } .div1{ position:absolute; z-index:1; } .div2{ position:absolute; z-index:5; left:200px; top:0px } .div3{ position:absolute; z-index:10; left:400px; top:0px }效果:

来源:爱蒂网