由于描述而正在推送布局

Question

我正在使用 DataList 控件水平显示每行三个产品。 但存在布局问题，它推高了产品图像容器元素，如下所示：

数据列表布局问题http://www.pixelshack.us/images/wwmlzkvhxsr7b2l0ptcl.jpg

这是代码：

  <asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" RepeatLayout="Table"
                DataSourceID="ObjectDataSourceCategories" RepeatDirection="Horizontal" CellSpacing="10" CellPadding="0" HorizontalAlign="Center" ItemStyle-Wrap="true">
                <ItemTemplate>

                        <a href='<%# "Items.aspx?catId=" + (string)Eval("id") %>'>
                            <asp:Image ID="Image1" CssClass="photo-border photo-float-left" runat="server" Width="165px"
                                Height="120px" ImageUrl='<%# "ProductImages/Thumbnails/" + (string)Eval("ImageUrl") %>'
                                AlternateText='<%#(string)Eval("ImageAltText")%>' /></a>
                        <br />
                        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "Items.aspx?catId=" + (string)Eval("id") %>'
                            Text='<%# Eval("Title").ToString()%>' Font-Bold="true" />
                </ItemTemplate>
            </asp:DataList>

我怎样才能解决这个问题？

提前致谢。

Answer 1

我也有类似的问题。 我最终不得不将链接的图像和文本分解为自己的 div 并相应地设置它们的样式：

<ItemTemplate>
    <div class="outer">
        <div class="top">
            <asp:HyperLink id="hlImage" runat="server" CssClass="Font7">
            </asp:HyperLink>
        </div>
        <div class="bottom">
            <asp:Label id="lbText" runat="server" CssClass="Font7"></asp:Label>
        </div>
    </div>
</ItemTemplate>

我确信有更简洁的方法可以做到这一点，这只是 HTML 输出可能是什么样子的示例。 这只是“即兴”，但如果您放入空的 htm 文件，它就会显示。

<div style="width: 100px;">
    <!-- first row -->
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="height:50px; background-color:Aqua; vertical-align:bottom;">
            <span>text</span>
        </div>
    </div>
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="background-color: Aqua;">
            <span style="height:50px; vertical-align:bottom;">text</span>
        </div>
    </div>
    <!-- second row -->
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="height:50px; background-color:Aqua; vertical-align:bottom;">
            <span>text</span>
        </div>
    </div>
</div>

您很可能使用 RepeatLayout="Flow" ItemStyle="float:left;" 在您的 DataList 控件中也能提供帮助。

Answer 2

我不知道如何解决这个问题，但我首先将每个项目放入

或 中，然后使用 CSS 类，而不是控件的样式。 例如：

<Item Template>
  <div class="myClass">...</div>
</Item Template>

将其与 Firebug 一起使用进行调试通常比弄清楚如何违反控件的高度等更容易。