之前设置横向一直不行,看了这个,觉得可以

初学HTML,遇到一个题需要将几张图放在一个边框里,并且需要横向拖动

        想着很简单,直接在div中设置width、height。并添加属性“overflow:auto;”。但实际运行是发现图片始终会换行,窗口只能上下滚动

        后来找到问题的原因,是因为由于在div中直接添加图片,所以图片会适应该div的大小,从而自动换行。而要做到不换行的效果,则需要在div中嵌套一层div2,设置div2的width > div的width,由此保证:图片不会换行;在横轴方向溢出,从而出现横向滚动条。

        记录以下代码一遍日后查阅

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>homework</title>  
  6.     <style>  
  7.         #kuang{  
  8.             border:1px solid #000;  
  9.             width: 500px;  
  10.             height: 120px;  
  11.             overflow:auto;  
  12.         }  
  13.         img:hover{  
  14.             /*鼠标悬浮时,生成阴影轮廓*/  
  15.             box-shadow: 0px 0px 0px 1px red;  
  16.         }  
  17.         img{  
  18.             border-radius:5px;  
  19.             margin-top:10px;  
  20.         }  
  21.         div{  
  22.             /*设置内部嵌套的div宽度(大于外部div宽度)*/  
  23.             width: 700px;  
  24.         }  
  25.     </style>  
  26. </head>  
  27. <body>  
  28.     <div id="kuang">  
  29.             <div>  
  30.                 <img src="images/p_small_001.jpg" >  
  31.                 <img src="images/p_small_002.jpg" >  
  32.                 <img src="images/p_small_003.jpg" >  
  33.                 <img src="images/p_small_004.jpg" >  
  34.                 <img src="images/p_small_005.jpg" >  
  35.                 <img src="images/p_small_006.jpg" >  
  36.                 <img src="images/p_small_007.jpg" >  
  37.             </div>  
  38.     </div>  
  39. </body>  
  40. </html>  


转载自:https://blog.csdn.net/lfq0404/article/details/79490943

阅读更多
个人分类: 前端JS
想对作者说点什么? 我来说一句

MyEclipse2013 破解文件

2013年07月23日 845KB 下载

没有更多推荐了,返回首页

不良信息举报

之前设置横向一直不行,看了这个,觉得可以

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭