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

html

<div class="container "> //外层写个containe让他距离屏幕的左右都有
4000
距离。在这个距离内再放图片。这样就不会太靠边啦！！！

             <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;}