图片表格的css样式
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>
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18