类似淘宝商品展示，上面图片下面名字和标题的css样式设置

html

<div class="container "> //外层写个containe让他距离屏幕的左右都有距离。在这个距离内再放图片。这样就不会太靠边啦！！！
             <div class="mui-row mui-col-xs-12 mui-clearfix">
                 <span class="mui-col-xs-6">
                     <div class="img"><img src="images/A/015.png"/></div>  //重要的是在这个图片外面设置一个高度，这样无论最后的上传的图片多大都可以啦。
                     <p>A套装美眼霜</p>
                     <p class="red1">￥2100.00</p>
                 </span>
                 <span class="mui-col-xs-6">
                     <div class="img"><img src="images/A/015.png"/></div>
                     <p>A套装美眼霜</p>
                     <p class="red1">￥2100.00</p>
                 </span>
             </div>
             <div class="mui-row mui-col-xs-12 mui-clearfix">
                 <span class="mui-col-xs-6">
                     <div class="img"><img src="images/A/015.png"/></div>
                     <p>A套装美眼霜</p>
                     <p class="red1">￥2100.00</p>
                 </span>
                 <span class="mui-col-xs-6">
                     <div class="img"><img src="images/A/015.png"/></div>
                     <p>A套装美眼霜</p>
                     <p class="red1">￥2100.00</p>
                 </span>
             </div>
             </div>

    .container{margin:auto;padding:0 18px;padding-top: 20px;background:#F6F6F6;}
    .mui-row{ overflow: hidden;margin-bottom: 20px;}
    .mui-row .mui-col-xs-6{width:48%;background-color:#fff;border-radius:4px;overflow: hidden;}
    .mui-row .mui-col-xs-6:nth-child(2){margin-left:4%;}
    .mui-row img{width:100%;}
    .mui-row .img{height:170px;}