現(xiàn)如今，我們所使用的很多網(wǎng)站都擁有相同的內(nèi)容：商品展示。而這些展示往往采用了一種簡潔的設(shè)計，就是在左側(cè)展示商品圖片，右側(cè)則是相應(yīng)的商品信息。實現(xiàn)這種設(shè)計方法的關(guān)鍵在于利用了CSS，我們來看一下下面的教程。

/* CSS: */
.left {
float: left;
width: 30%;
margin-right: 3%;
}
.right {
float: right;
width: 67%;
}
.product {
overflow: hidden;
}
.product img {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}
.product h3 {
margin: 0;
font-size: 26px;
font-weight: 700;
}
.product p {
margin: 10px 0;
font-size: 14px;
line-height: 18px;
color: #555;
}

以上代碼會將商品信息分為左右兩側(cè)，左側(cè)展示了圖片，右側(cè)展示了商品信息。我們可以通過設(shè)置左側(cè)的寬度和右側(cè)的寬度來調(diào)整布局的比例。同時，我們也可以通過設(shè)置padding，margin等屬性來調(diào)整商品信息的位置和大小。它們都非常基礎(chǔ)，不需要太多的CSS知識就能完成。

總的來說，通過使用CSS，我們可以輕松地實現(xiàn)左側(cè)商品展示的設(shè)計，為用戶提供更加清晰和直觀的購物體驗。如果您也需要設(shè)計商品展示布局，那么上面的CSS代碼一定會對您有所幫助。