由于描述，布局被推送

我正在使用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>

我怎样才能克服这个问题？

在此先感谢。

来源

2009-07-21 Tarik

我有一个类似的问题更容易。我最后不得不打破链接的图像和文字，并转化为自己的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控件中也可以提供帮助。

来源

2009-07-21 18:40:16

能给我的CSS代码为好？谢谢.. – Tarik 2009-07-21 18:41:43

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

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

与萤火虫以此来然后进行调试通常要比搞清楚你是如何违反了控件的高度等

来源

2009-07-21 18:33:27 Nick

我试过，但没有为我做的意义:(我的意思是不是看起来像在asp.net源页面的方式，一切都在纯HTML转换，你都知道了:) – Tarik 2009-07-21 18:43:39

由于描述，布局被推送

回答

相关问题