横向排列图片的简单方法

描述：图片横向排列，出现横向滚动条。最外层div根据图片的宽度 设定固定长度 ，包含了图片的底下的说明描述

css样式：

/* 包裹图片div的盒子 */
.ul-box{
    /*white-space: nowrap;*/
    width: 3650px;
}
/* 包裹图片下标题格子 */
.li-box span{
    margin: 0;
    padding: 0;
    display: block;
}
/* 包裹图片是固定的宽度 */
.li-box{
    width: 720px;
    margin-left: 5px;
}
/* 最外层: x-axis 滚动条出现以及 y-axis 滚动条隐藏 */
.jz-box{
    overflow-x: scroll;
    overflow-y: hidden;
}
/* 包裹图片的最外层div与下标题div同样宽度 */
.jz-box,.title-box{
    width: 720px;
}
/* 滚动图片的下标题以及图片的下标题 */
.title-box,.li-box span{
    text-align: center;
}
/* 顶格最大宽度: 最外层和滚动图片的下标题以及图片的下标题; */
.li-box span{
    width: 100%;
}
/* 浮动: li和里面的img以及图片的标题 */
.li-box,.li-box img,.li-box span{
    /*border: 1px solid red;*/
    float: left;
}

 

html标签

	

		

			
			标题1
		
		

			
			标题2
		
		

			
			标题3
		
		

			
			标题4
		
		

			
			标题5
		
	

下标题