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>