如何显示在表格格式产品在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列。