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

最新推荐文章于 2024-09-18 16:44:10 发布

Gofery

最新推荐文章于 2024-09-18 16:44:10 发布

阅读量182

点赞数

分类专栏：前端JS

前端JS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用HTML和CSS实现图片横向滚动效果。通过内外两层div布局，内层div宽度大于外层，使得图片能在一行内显示并允许横向滚动。同时介绍了如何为图片添加hover效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

   [html] 
   view plaincopy
<!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>  