初学HTML,遇到一个题需要将几张图放在一个边框里,并且需要横向拖动
想着很简单,直接在div中设置width、height。并添加属性“overflow:auto;”。但实际运行是发现图片始终会换行,窗口只能上下滚动
后来找到问题的原因,是因为由于在div中直接添加图片,所以图片会适应该div的大小,从而自动换行。而要做到不换行的效果,则需要在div中嵌套一层div2,设置div2的width > div的width,由此保证:图片不会换行;在横轴方向溢出,从而出现横向滚动条。
记录以下代码一遍日后查阅
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>homework</title>
- <style>
- #kuang{
- border:1px solid #000;
- width: 500px;
- height: 120px;
- overflow:auto;
- }
- img:hover{
- /*鼠标悬浮时,生成阴影轮廓*/
- box-shadow: 0px 0px 0px 1px red;
- }
- img{
- border-radius:5px;
- margin-top:10px;
- }
- div{
- /*设置内部嵌套的div宽度(大于外部div宽度)*/
- width: 700px;
- }
- </style>
- </head>
- <body>
- <div id="kuang">
- <div>
- <img src="images/p_small_001.jpg" >
- <img src="images/p_small_002.jpg" >
- <img src="images/p_small_003.jpg" >
- <img src="images/p_small_004.jpg" >
- <img src="images/p_small_005.jpg" >
- <img src="images/p_small_006.jpg" >
- <img src="images/p_small_007.jpg" >
- </div>
- </div>
- </body>
- </html>
转载自:https://blog.youkuaiyun.com/lfq0404/article/details/79490943