由於描述，佈局被推送

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

由於描述，佈局被推送

回答

相關問題