缩略图展示商品信息

今天要切一个页面，美工要求右侧图片要与右边线对齐，由于给缩略图设置了margin-right属性，导致图片与右边线有一个margin-right的距离，但是查看了tmall 和 jd 两家网站，都是右边线对齐的，这样显得好看多了。
 
问题：

容器的宽度是1200px,每个item的样式是一致的，开发只是做了重复遍历item的操作，中间的间隔只有4段，但是内容有5个，就会导致最后一个在容器中装不下，会出现换行。

 

解决办法：

1、将一个子item的宽度设置为232px,然后设置其margin-right为10px;(10*4 + 232*5 = 1200)

2、将list容器设置为1250px（只需要大于1210px小于1210+232+10px即可），这样就会在第6个的时候因为剩余空间装不下而换行。

 



 

<style>
.list_width {
cursor: pointer;
overflow: visible;
width: 232px;
}
.float_left {
float: left;
}
.border_b_eee {
border: 1px solid #eeeeee;
}
.sqh_relative {
position: relative;
}
.margin_right_10 {
margin-right: 10px;
}
.margin_bottom_10 {
margin-bottom: 10px;
}
</style>

<div class="margin_bottom_20" style="width: 1250px;">

<div class="float_left margin_bottom_10 sqh_relative margin_right_10 border_b_eee list_width" onclick="jumpTo(this)" target="http://www.baidu.com">
<div class="">
<img src="img/huijishi_list/mangguo.png" class="img-responsive" style="width:230px;height:230px;" >
</div>
<div class="margin_top_10 margin_left_10 margin_right_10">
<span class="sqh_font_color_red font_16">￥59.90</span>
<del class="font_12 sqh_color_99">25.60元</del>
<button type="button" class="btn btn_nobg_yellowborder float_right" style="padding: 0px 5px;">天天半价</button>
</div>
<div class="margin_left_10 margin_right_10 summary margin_bottom_5">
泰国进口大金煌芒果5斤 泰芒鲜水果 约3-5个装
</div>
</div>

... ...
</div>

 





大小: 161 KB
查看图片附件