如何顯示在表格格式產品在MVC 4.0（剃刀）

Question

目前我的數據顯示行這樣

項目1個項目2項目3項目4項目5

我用得到這樣的結果如下代碼

@using SportsStore.Models.WebUI 
@model SportsStore.Models.ProductsListViewModel 
@{ 
    ViewBag.Title = "Products"; 
} 
<div style="padding-left: 300px;"> 
    <table style="height: 300px; border: 2px; border: 1px solid Red;"> 
     <tr> 
      @foreach (var p in Model.Products) 
      { 

       <td style="height: 100px; width: 150px; border: 2px"> 
        <a href="@Url.Action("Detail", "Product", 
     new { id = p.ProductID })"> 
         <img alt="@p.ProductDescription" src="@p.Imagename" width="150" height="150"/> 
         <br /> 
         Name : @p.ProductDescription<br /> 
         Price : <span>@p.RetailPrice</span> </a> 
       </td> 


      } 
     </tr> 
    </table 



</div> 

我想告訴喜歡

項目1個項目2項目3項目4項我的數據5

項目6項目7項目8項目9項目10

請幫我

由於提前

Answer 1

可以使用的div。首先爲outher div設置一個width大小，並設置width大小的cell div和float:left，如下所示。

<div style="padding-left: 300px;width:750px;"> 
    @foreach (var p in Model.Products) 
    { 
     <div style="height: 100px; width: 150px; float:left;"> 
      <a href="@Url.Action("Detail", "Product", 
    new { id = p.ProductID })"> 
       <img alt="@p.ProductDescription" src="@p.Imagename" width="150" height="150"/> 
       <br /> 
       Name : @p.ProductDescription<br /> 
       Price : <span>@p.RetailPrice</span> </a> 
     </div> 
    } 
</div> 

所以，如果你的outher DIV width = 750和細胞的div width = 150那麼你有一百五分之七百五= 5列。所以，它每行自動創建5列。