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

来源：互联网发布：sql字段的date相等编辑：程序博客网时间：2024/05/17 09:40

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

0 0