1

SOに関する最初の質問

で検索結果ページを作成する必要がありますが、asp.netいくつか問題があります。（「ボックス」ごとに）本の表紙の画像と本のタイトルが表示されます。

すべての画像が同じ高さではないことを知っているので、私はそれらを垂直に下に揃えることができるようにしたいと思います。私はウェブ上で本当に一生懸命検索し、display table / table-row/table-cellを使用していくつかの解決策を見つけました。

ListView's GroupTemplate（行として）および（セルとして）を使用して、すべてが正常に機能します。ItemTemplate画像のみを表示したい場合-しかし-画像を下に垂直に配置し、本のタイトルを下に配置します（タイトルの下に「詳細」などのリンクを付けます） ）。

自分の本のタイトルを画像と同じセルに入れることができなかったことを知っていると（タイトルが2行になり、デザインが再び壊れてしまうため...）、別の行が必要になると思います（私のように以下のコード）。2つの行を配置しても機能すると思いましたが、2つの異なるitemtemplates（1つは画像用、もう1つは彼の画像の下の別の行に配置されたテキスト用）を呼び出すこと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に2番目の行を作成する必要はありません。

タイトルの高さは固定されています。これは、2行または1行しか取れないためです。私のタイトルの下のリンクはすべての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

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>

1つ試してください：

<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 に答える