网页定义产品图列最右边的边界为零排版，手机版网页前端代码一般用这种方法。

@media screen and (max-width: 1100px) and (min-width: 641px) {
.content {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.iproZdp {
	width: 90.625%;
	margin: 2% auto;
}
.iproZdp .metro-b {
	position: relative;
	float: left;
	width: 31.3%;
	margin: 2% 3% 3% 0%;
}
.iproZdp .metro-b:nth-child(3n) {
	margin: 2% 0% 3% 0%;
}
.iproZdp .metro-b .pic {
	position: relative;
	width:100%;
	height:0;
	padding-top:68%;
	border: 1px solid #b7b6b6;
}
.iproZdp .metro-b .pic img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
max-height: 100%;
 }

@media screen and (max-width:640px) {
.content {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.iproZdp {
	width: 90.625%;
	margin: 3% auto;
}
.iproZdp .metro-b {
	position: relative;
	float: left;
	width: 47%;
	margin: 2% 6% 3% 0%;
}
.iproZdp .metro-b:nth-child(2n) {
	margin: 2% 0% 3% 0%;
}
.iproZdp .metro-b .pic {
	position: relative;
	width:100%;
	height:0;
	padding-top:67.4%;
	border: 1px solid #b7b6b6;
}
.iproZdp .metro-b .pic img {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	max-height:100%;
 }
.iproZdp .metro-b .text {
    padding-top: 1.5%;
    color: #333333;
    font: 0.14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
}