由于描述，正在推送布局

Question

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

Data List Layout problem 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

我不确定如何解决这个问题，但我会首先将每个项目放在<div> 或<span> 中，并使用 CSS 类，而不是控件的样式。例如：

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

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