1

关于SO的第一个问题

我必须在其中做一个搜索结果页面，asp.net但我遇到了一些问题 - 我将（对于每个“框”）拥有书籍封面的图像和书名

知道所有图像的高度不同，我希望能够将它们垂直对齐到底部。我在网上非常努力地搜索并找到了一些使用显示表/表行/表单元格的解决方案。

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

知道我不能将我的书名放在与图像相同的单元格中（因为有时标题会占用两行，这会再次破坏设计......），我认为我需要另一行（比如在我的下面的代码）。我坚持将我的两行放入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>

非常感谢， - 埃里克

4

2 回答 2

1

不知何故，我已经能够做我想做的事：

通过为剩余内容（标题和链接）提供固定高度，图像继续垂直对齐。所以在我的特殊情况下，不需要在 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-10T12:47:12.660 回答
0

而不是两个项目模板：

<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-09T07:33:15.823 回答