商品列表對(duì)于電商網(wǎng)站來說，是非常重要的一部分。而在頁面設(shè)計(jì)中，如何準(zhǔn)確地展示商品信息，也是我們需要考慮的重要問題。其中，CSS中的 div 元素可以解決商品列表排版布局的問題。

<div class="product-list">
<div class="product-item">
<img src="product1.jpg" alt="product1">
<h3>Product 1</h3>
<p>Price: $50</p>
</div>
<div class="product-item">
<img src="product2.jpg" alt="product2">
<h3>Product 2</h3>
<p>Price: $80</p>
</div>
<div class="product-item">
<img src="product3.jpg" alt="product3">
<h3>Product 3</h3>
<p>Price: $120</p>
</div>
</div>
<style>
.product-item {
float: left;
width: 33%;
text-align: center;
}
.product-item img {
width: 80%;
}
</style>

在上面的代碼中，我們創(chuàng)建了一個(gè)名為“product-list”的 div 元素，它包含 3 個(gè)“product-item ”div 元素。每個(gè)“product-item”包含一個(gè)圖片，商品標(biāo)題和價(jià)格等信息。在 CSS 樣式中，我們使用了 float 屬性和 width 屬性，使產(chǎn)品列表保持了三欄式的布局。

需要注意的是，在編寫 CSS 時(shí)，我們應(yīng)該指定圖片的寬度，以避免因不同大小的圖片導(dǎo)致布局錯(cuò)亂。

除此之外，我們還可以通過 CSS 樣式來美化商品列表。比如添加邊框，設(shè)置字體顏色和背景色等等。總之，靈活使用 div 元素和 CSS 樣式可以幫助我們打造一個(gè)美觀且易用的商品列表。