商品排列展示是電子商務(wù)網(wǎng)站非常重要的一部分，它直接影響著用戶(hù)的購(gòu)物體驗(yàn)和購(gòu)買(mǎi)決策。因此，如何讓商品展示更加美觀、實(shí)用就顯得尤為重要。本文將從CSS樣式的角度，介紹幾種通用的商品排列展示方式。

/*1. 瀑布流布局*/
.item-container{
column-count: 3;
column-gap: 20px;
margin: 30px auto;
}
.item{
display: inline-block;
margin-bottom: 20px;
width: 100%;
}
.item img{
width: 100%;
height: auto;
}
.item span{
display: block;
text-align: center;
}
/*2. 網(wǎng)格布局*/
.item-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 30px auto;
}
.item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item img{
width: 100%;
height: auto;
}
.item span{
margin-top: 10px;
text-align: center;
}
/*3. 列表布局*/
.item-container{
margin: 30px auto;
}
.item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.item img{
width: 30%;
height: auto;
}
.item span{
display: block;
}
/*4. 卡片布局*/
.item-container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 30px auto;
}
.item{
width: 30%;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 1px 1px 2px #ccc;
}
.item img{
width: 100%;
height: auto;
}
.item span{
display: block;
}

以上代碼展示了四種常見(jiàn)的商品排列展示布局，它們分別是瀑布流布局、網(wǎng)格布局、列表布局和卡片布局。具體的樣式可以根據(jù)實(shí)際情況進(jìn)行調(diào)整，或者加上一些動(dòng)效，讓商品展示更加生動(dòng)，吸引用戶(hù)的眼球。在實(shí)際開(kāi)發(fā)中，還可以結(jié)合JS實(shí)現(xiàn)懶加載、無(wú)限滾動(dòng)等功能，提升用戶(hù)的瀏覽體驗(yàn)。