列表视图控件

Question

我在 Photoshop 中设计了一个模型，我打算将它应用到我的产品目录的 ListView 控件，但它似乎没有正确显示它（未对齐？），我希望这里的人能像我一样指出我的错误试图弄清楚无济于事。

预期结果/样机：

调试后（不要介意丢失的照片）：

看看我的代码，

CSS：

.productItem {
     width: 200px;
     float: left;
     padding: 5px;
     margin: 5px;
     text-align: center;
     background-color: White;        
}
.cell1 
{
     width:117px;
     height:27px;
     background-image: url("images/blackbutton.jpg");
     float:left;
     font-size:12px;
     vertical-align:middle;
     color:White;
     text-align:center;
}
.cell2 
{
     width:118px;
     height:27px;
     background-image: url("images/orangebutton.jpg");
     float:left;
     font-size:12px;
     vertical-align:middle;
     color:White;
     text-align:center;
}

ListView 提示：

<div class="catalog">
    <asp:ListView runat="server" ID="listView" GroupItemCount="3" DataSourceID="AccessDataSource1">
        <LayoutTemplate>
            <div style="height: 962px;">
            <div style="width: 790px;">
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
                <asp:DataPager runat="server" ID="dpMyDatePager" PageSize="3" PagedControlID="listView" .Ю
            </div>
        </LayoutTemplate>
        <GroupTemplate>
            <div style="clear: both;">
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
            </div>
        </GroupTemplate>
        <ItemTemplate>
            <div class="productItem">
            <div>
                <img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
            </div>
            <div>
                <b>
                   <%# Eval("ProductBrand") %> <%# Eval("ProductModel") %></b>
            </div>
            <div>
                Our Price: $<%# Eval("NormalPrice") %>
            </div>
        </div>
        <div class="cell1">Add to cart</div>
        <div class="cell2">View details</div>
    </ItemTemplate>
    </asp:ListView>
</div>

Answer 1

将 cell1 和 cell2 的宽度更改为 50% 并尝试以下布局：

<LayoutTemplate>
    <div style="height: 962px;">
        <div style="width: 790px;">
            <asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
        </div>
        <asp:DataPager runat="server" ID="dpMyDatePager" PageSize="6" PagedControlID="listView"></asp:DataPager>
    </div>
</LayoutTemplate>
<GroupTemplate>
    <div style="clear: both;">
        <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
    </div>
</GroupTemplate>
<ItemTemplate>
    <div class="productItem">
        <div>
            <img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
        </div>
        <div>
            <b>
                <%# Eval("ProductBrand") %>
                <%# Eval("ProductModel") %></b></div>
        <div style="clear: right;">
            Our Price: $<%# Eval("NormalPrice") %></div>
        <div class="cell1">
            Add to cart</div>
        <div class="cell2">
            View details</div>
    </div>
</ItemTemplate>