要修改模板文件 product_category

要怎么修改這段內容？


<div id="productList">
<!-- {foreach from=$product_list name=product_list item=product} -->
<dl{if $smarty.foreach.product_list.iteration % 2 eq 2} class="noMargin"{/if}>
<dt><a href="{$product.url}"><img src="{$product.thumb}" alt="{$product.name}" /></a></dt>
<dd>
<p class="name"><a href="{$product.url}" title="{$product.name}">{$product.name}</a></p>
<p class="brief">{$product.description|truncate:50:"..."}</p>
<p class="price">{$lang.price}：{$product.price}</p>
</dd>
</dl>
<!-- {/foreach} -->
<div class="clear"></div>
</div>

是的，
這個是描述
<p class="brief">{$product.description|truncate:50:"..."}</p>
這個是價格
<p class="price">{$lang.price}：{$product.price}</p>

改成4列修改css樣式即可

修改哪里可以變成四列？

/* product_category
----------------------------------------------- */
#productList {
padding-top: 20px;
color: #999999;
}
#productList dl {
float: left;
width: 380px;
height: 135px;
margin: 0 30px 30px 0;
}
#productList dl.noMargin {
margin-right: 0;
}
#productList dt {
float: left;
width: 135px;
}
#productList dd {
margin-left: 155px;
padding-top: 10px;
}
#productList dt img {
border: 1px solid #EEEEEE;
width: 135px;
height: 135px;
}
#productList .name {
height: 18px;
overflow: hidden;
font-size: 14px;
}
#productList .name a {
color: #333333;
font-weight: bold;
}
#productList .brief {
color: #999999;
padding-top: 8px;
height: 60px;
}
#productList .price {
padding-bottom: 10px;
}
/* product
----------------------------------------------- */
#product {
padding: 15px 0;
}
#product .productImg {
float: left;
width: 300px;
}
#product .productInfo {
float: left;
width: 465px;
padding: 10px 0 0 15px;
line-height: 200%;
}
#product .productInfo h1 {
font-size: 18px;
}
#product .productInfo ul {
padding-top: 10px;
margin-bottom:50px;
}
#product .productInfo .productPrice {
margin-bottom: 5px;
}
#product .productInfo .productPrice .price {
font-family: Arial;
font-size: 20px;
font-weight: bold;
}
#product .productInfo .btnAsk {
zoom: 1;
overflow: hidden;
}
#product .productInfo .btnAsk dt {
float: left;
width: 88px;
height: 39px;
line-height: 39px;
text-align: right;
padding-right: 3px;
margin-right: 6px;
background-color: #E0E0E0;
color: #333;
font-weight: bold;
}
#product .productInfo .btnAsk dd {
float: left;
width: 300px;
}
#product .productInfo .btnBuy {
margin-bottom: 40px;
}
#product .productInfo .btnBuy .addToCart {
background:#19B4EA url(images/btn_addtocart.png) no-repeat 20px 50%;
color: #FFFFFF;
padding: 8px 25px 8px 50px;
text-decoration: none;
cursor: pointer;
font-size:16px;
}
#product .productInfo .btnBuy .addToCart:hover {
background-color: #44C4EE;
}
#product .productContent {
padding: 15px 0;
}
#product .productContent h3 {
padding: 30px 0 10px 0;
color: #333;
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid #CBD1D3;
}
#product .productContent ul {
padding: 15px 0;
color: #666;
line-height: 200%;
}
#product .productContent img {
max-width: 100%

還比我菜

#productList dl {
float: left;
width: 380px;
height: 135px;
margin: 0 30px 30px 0;
}
width: 380px; 這個是寬度調整就可以了