横向排列图片的简单方法

描述：图片横向排列，出现横向滚动条。最外层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标签

<div class="jz-box">
	<div class="ul-box">
		<div class="li-box">
			<img src="gdxoverflow.jpg" style="width: 720px;height: 360px;">
			<span>标题1</span>
		</div>
		<div class="li-box">
			<img src="gdxoverflow2.jpg" style="width: 720px;height: 360px;">
			<span>标题2</span>
		</div>
		<div class="li-box">
			<img src="gdxoverflow3.jpg" style="width: 720px;height: 360px;">
			<span>标题3</span>
		</div>
		<div class="li-box">
			<img src="gdxoverflow4.jpg" style="width: 720px;height: 360px;">
			<span>标题4</span>
		</div>
		<div class="li-box" style="width: 320px;height: 360px;">
			<img src="gdxoverflow5.jpg" style="width: 320px;height: 360px;">
			<span style="width: 320px;height: 360px;">标题5</span>
		</div>
	</div>
</div>
<div class="title-box">下标题</div>