初学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>
扫一扫
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
