HTML-设置横向滚动条

        初学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>

阅读更多
相关热词
换一批

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