中分两列商品列表展示

效果图

image.png

1.html

<div class="sanp_content">
            <div class="p-2-1">
                <div class="sanp_son">
                    <img src="img/luyou.jpg"/>
                    <div class="sanp_name">
                        双频USB无线网卡台式机笔记本通用 随身WiFi接收器
                    </div>
                    <div style="height: 30px;">
                        <span class="sanp_price">￥78</span>
                        <span class="sanp_p_price">￥124</span>                      
                    </div>
                </div>  
            </div>
            <div class="p-2-1">
                <div class="sanp_son">
                    <img src="img/luyou.jpg"/>
                    <div class="sanp_name">
                        双频USB无线网卡台式机笔记本通用 随身WiFi接收器
                    </div>
                    <div style="height: 30px;">
                        <span class="sanp_price">￥78</span>
                        <span class="sanp_p_price">￥124</span>                      
                    </div>
                </div>  
            </div>
            <div class="p-2-1">
                <div class="sanp_son">
                    <img src="img/luyou.jpg"/>
                    <div class="sanp_name">
                        双频USB无线网卡台式机笔记本通用 随身WiFi接收器
                    </div>
                    <div style="height: 30px;">
                        <span class="sanp_price">￥78</span>
                        <span class="sanp_p_price">￥124</span>                      
                    </div>
                </div>  
            </div>
            <div class="p-2-1">
                <div class="sanp_son">
                    <img src="img/luyou.jpg"/>
                    <div class="sanp_name">
                        双频USB无线网卡台式机笔记本通用 随身WiFi接收器
                    </div>
                    <div style="height: 30px;">
                        <span class="sanp_price">￥78</span>
                        <span class="sanp_p_price">￥124</span>                      
                    </div>
                </div>  
            </div>
        </div>

2.css

.sanp_content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.p-2-1{
    width: 50%;
}
.p-2-1:nth-child(2n+1)>.sanp_son{
    margin: 8px 4px 0 0;
    padding-left: 10px;
    position: relative;
}
.p-2-1:nth-child(2n)>.sanp_son{
    margin: 8px 0 0 4px;
    padding-right: 10px;
    position: relative;
}
.p-2-1:nth-child(2)>.sanp_son{
    margin-top: 0;
    position: relative;
}
.p-2-1:first-child>.sanp_son{
    margin-top: 0;
    position: relative;
}
.sanp_name{
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 3px;
    height: 30px;
    line-height: 30px;
}
.sanp_son img{
    width: 100%;
    height: 110px;
    align-content: center;
}
.sanp_price{
    font-size: 14px;
    color: red;
    float: left;
    height: 30px;
    line-height: 30px;
    margin-left: 3px;
}
.sanp_p_price{
    font-size: 12px;
    color: #C4C4C4;
    text-decoration: line-through;
    float: left;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
}