图片表格的css样式

raymond.chen

浏览: 1441244 次
性别:
来自: 广州

最近访客更多访客>>

林祥纤

whzresponse

loginboot

vicento4

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端页面

box自动换行：

<style type="text/css">
	.box_container{
		border: 1px solid #aaaaaa;
		background-color: white;
		width: 460px;
		height: 290px;
		padding: 0 0 10px 30px;
		margin: 5px 5px;
	}

	.box_container .box{
		border: 1px solid red;
		background-color: #FFFAE3;
		width: 70px;
		height: 100px;
		position: relative;  /* 价格span固定在div底部 */
		float: left;		 /* box水平排列 */
		margin-top: 30px;
		margin-right: 10px;
		text-align: center;  /* 文字和图片水平居中 */
	}

	.box_container .box img{
		width:65px;
		height:70px;
	}

	.box_container .box span{
		width:100%;
		height:25px;
		background-color:#EE7621;
		color:white;
		font-size:11px;
		font-weight: 600;
		padding-top: 3px;
		position:absolute;   /* 价格span固定在div底部 */
		left:0;				 /* 价格span固定在div底部 */
		bottom:0;			 /* 价格span固定在div底部 */
	}
</style>

box不自动换行：

<style type="text/css">
	.box_container{
		border: 1px solid #aaaaaa;
		background-color: white;
		width: 460px;
		height: 290px;
		padding: 0 0 10px 30px;
		margin: 5px 5px;

		 /* box水平排列 */
		display: block;
		overflow: auto;   /* 越界自动出现滚动条 */
		white-space: nowrap;  /* 不自动换行 */
	}

	.box_container .box{
		border: 1px solid red;
		background-color: #FFFAE3;
		width: 70px;
		height: 100px;
		position: relative;  /* 价格span固定在div底部 */

		 /* box水平排列 */
		display: inline-block;  /* 在同一行显示 */

		margin-top: 30px;
		margin-right: 10px;
		text-align: center;  /* 文字和图片水平居中 */
	}

	.box_container .box img{
		width:65px;
		height:70px;
	}

	.box_container .box span{
		width:100%;
		height:25px;
		background-color:#EE7621;
		color:white;
		font-size:11px;
		font-weight: 600;
		padding-top: 3px;
		position:absolute;   /* 价格span固定在div底部 */
		left:0;				 /* 价格span固定在div底部 */
		bottom:0;			 /* 价格span固定在div底部 */
	}
</style>