html代码

<div class="proItem">
                <div class="pic">
                    <a href="pro-detail.html"><img src="images/products_05.jpg" alt=" "></a>
                </div>
                <div class="content">      
                <h4><a href="pro-detail.html">预制桩</a></h4>  
                <p>能够生产多种规格的高强预应力混凝土管桩、静钻...</p>              
                </div>
                
            </div>

css代码

.proItem{  position:relative; padding-bottom:10px; margin:10px auto 20px;}
.proItem .pic{ position:relative; padding-top:calc(335/380 * 100%); overflow:hidden;background:#0b3893;}
.proItem .pic img{ position:absolute; top:0; left:0;}
.proItem .pic:hover img{ transform:scale(1.1,1.1); opacity:0.8}
.proItem .content{ padding:10px 10px 30px;color:#555; background:#f2f2f2; overflow:hidden; }
.proItem .content h4{ font-size:16px; line-height:1.5; font-weight:bold; margin:7px 0; }
.proItem .content p{white-space:nowrap;}

这是最简单的排列方式了吧，我都懒得写，留着以后需要的时候来复制~~~哈哈