1

現在、私のデータはこのように並んでいます

項目 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

私を助けてください

前もって感謝します

4

1 に答える 1

1

divを使用できます。まずwidth、外側のdivのサイズを設定し、widthセルの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>

したがって、外部divwidth = 750とセルdivの場合、750 width = 150/150=5列になります。したがって、行ごとに5つの列が自動的に作成されます。

于 2013-02-25T10:48:15.800 に答える