asp.net listview在grouptemplate中有两行

S.O.的第一个问题asp.net listview在grouptemplate中有两行

我在asp.net做一个搜索结果页面和我有一些问题 - 我会（每个“盒子”）的书籍封面的图像和书

称号知道，所有的图像不是一样的高度，我希望能够将它们垂直对齐到底部。我在网上搜索得很辛苦，发现了一些使用display table/table-row/table-cell的解决方案。

一切工作正常，使用ListView的GroupTemplate（如行）和ItemTemplate（如电池）。如果我只想显示图像 - 但是 - 我想图像垂直对齐底部，书的标题下面（有类似的链接“在标题下面学习更多”）。

知道我无法将我的书名放在与图片相同的单元格中（因为有时标题将占用两行，这将再次破坏设计...），我认为我需要另一行（就像我在下面的代码中）。我希望将GroupTemplate中的两行设置为GroupTemplate，但ListView似乎不能让我调用两个不同的项目模板（一个用于图像，另一个用于放置在另一行，文本下方的文本）。

任何帮助将不胜感激，如果你有其他的选择，我打开的建议。请记住，我需要DataPager，所以我认为ListView是唯一的出路。

这里是我的CSS

#grid{ 
    background: lightgreen; 
    border-spacing: 10px; 
    display: table; 
} 
#grid .row{display: table-row;} 
#grid .result{ 
    display: table-cell; 
    vertical-align: bottom; 
}

这里是我的搜索结果ListView草案（形象好，但只有蹩脚的 “测试” 文本）

<asp:ListView ID="lvSearchResults" runat="server" OnPagePropertiesChanged="DataPager_PreRender" OnPagePropertiesChanging="DataPager_PreRendering" GroupItemCount="5" > 
     <LayoutTemplate> 
      <div id="grid"> 
       <asp:PlaceHolder ID="groupPlaceholder" runat="server" /> 
      </div> 
     </LayoutTemplate> 
     <GroupTemplate> 
      <div class="row"> 
       <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> 
      </div> 
      <div class="row"> 
       <asp:PlaceHolder ID="itemPlaceHolder1" runat="server" /> 
      </div> 
     </GroupTemplate> 
     <ItemTemplate> 
      <div class="result"> 
       <p><a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a></p> 
      </div> 
     </itemtemplate> 
     <ItemTemplate> 
      <div class="result"> 
       <p><a href='<%# Container.DataItem.URI %>'>test</a></p> 
      </div> 
     </itemtemplate> 
    </asp:ListView>

非常感谢， - 埃里克

来源

2012-07-06 Eric Thibeault

不知怎的，我已经能够做到我想要的东西：

通过给予一定的高度，以剩余的内容（标题和链接），图像将继续垂直对齐。所以在我的情况下，不需要在groupTemplate中创建第二行。

固定高度为我的标题，因为它可以（但不是更多）两行或只有一行。由于我的标题下面的链接对于每个itemTemplate迭代都是相同的，因此不需要为他的块指定高度。

感谢MajoB为您的答案，但不知何故，它不适合我。

这是我的新的和改进的代码...;）

 <GroupTemplate> 
      <div class="row"> 
       <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> 
      </div> 
     </GroupTemplate> 
     <ItemTemplate> 
      <div class="result"> 
       <a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a> 
       <div style="height: 40px;margin-top: 10px;"><asp:Literal ID="litTitre" runat="server" Text='<%# TrunkStringRelay(Container.DataItem.Titre, 40) %>' /></div>      
       <a href='<%# Container.DataItem.URI %>'>En savoir plus &raquo;</a> 
      </div> 
     </itemtemplate>

来源

2012-07-10 12:47:12

取代两个项目模板：

<ItemTemplate> 
    <div class="result"> 
     <p><a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a></p> 
    </div> 
</itemtemplate> 
<ItemTemplate> 
    <div class="result"> 
     <p><a href='<%# Container.DataItem.URI %>'>test</a></p> 
    </div> 
</itemtemplate>

尝试之一：

<ItemTemplate> 
    <div class="result"> 
     <p><a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a></p> 
    </div> 
    <div style="clear:both"></div> 
    <div class="result"> 
     <p><a href='<%# Container.DataItem.URI %>'>test</a></p> 
    </div> 
</itemtemplate>

来源

2012-07-09 07:33:15

asp.net listview在grouptemplate中有两行

回答

相关问题