图片表格的css样式

最新推荐文章于 2023-12-02 09:11:22 发布

yue2008

最新推荐文章于 2023-12-02 09:11:22 发布

阅读量739

点赞数

分类专栏：前端页面

本文链接：https://blog.csdn.net/yue2008/article/details/84915993

版权

前端页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>