实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>负边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 780px;
margin: 0 auto;
border: 3px solid dodgerblue;
overflow: hidden;
margin-top: 10px;
}
.box {
width: 180px;
height: 180px;
margin: 0 20px 30px 0;
float: left;
position: relative;
background: url(https://img.php.cn//upload/image/303/138/710/1525664261532131.jpg) no-repeat;
overflow: hidden;
position: relative;
}
#div2{
margin-right: -20px;
}
.footer
{
position: absolute;
bottom: 0;
height: 40px;
line-height: 40px;
transition: height 0.5s;
font-family: 'Heiti SC', 'Microsoft YaHei';
font-size: 14px;
color: white;
}
.footer:hover{
transition: height 0.5s;
height: 60px;
cursor: pointer;
}
.span1{
width: 110px;
height: 100%;
background: #3c3c3c;
opacity: 0.8;
float: left;
}
.span2{
width: 70px;
height: 100%;
float: left;
background: deeppink;
text-align: center;
opacity: 0.8;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
<div class="box" >
<div class="footer">
<div class="span1">安踏体育运动</div>
<div class="span2">$139元</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
