Question

关于S.O的第一个问题。

我必须在asp.net中执行搜索结果页面，但我遇到了一些问题 - 我将（每个“盒子”）有一本书的封面图片和书的标题

知道所有图像的高度不同，我希望能够将它们垂直对齐到底部。我在网上搜索得非常努力，并使用display table / table-row / table-cell找到了一些解决方案。

一切正常，使用ListView的{{1}}（作为行）和GroupTemplate（作为单元格）如果我只想显示图像 - 但是 - 我希望图像垂直对齐到底部和书的标题如下（标题下方有“了解更多”的链接）。

知道我不能把我的书名放在与图像相同的单元格中（因为有时标题会占用两行，这会再次破坏设计......），我想我需要另一行（比如我下面的代码）。我认为把我的两行放在ItemTemplate中会起作用，但是GroupTemplate似乎没有让我能够调用两个不同的itemtemplates（一个用于图像，一个用于放置在另一行中的文本，在他的形象下面。）

任何帮助都将不胜感激，如果您有其他选择，我会接受建议。请记住，我需要一个ListView所以DataPager - 我认为 - 是唯一的出路。

这是我的CSS

ListView

这是我的搜索结果#grid{ background: lightgreen; border-spacing: 10px; display: table; } #grid .row{display: table-row;} #grid .result{ display: table-cell; vertical-align: bottom; }草稿（图片很好，但只有糟糕的“测试”文字）

ListView

非常感谢， - 埃里克

Answer 1

不知怎的，我已经能够做我想做的事了：

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

我的标题的固定高度，因为它可以（但不是更多）两行或仅一行。由于我的标题下方的链接对于每个itemTemplate itteration都是相同的，因此无需为其块指定高度。

感谢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>

Answer 2

而不是两个项目模板：

<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>

asp.net listview在grouptemplate中有两行

2 个答案: