初学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>
版权声明：本文为lfq0404原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。