1

DataList コントロールを使用して、行ごとに 3 つの製品を水平方向に表示しています。しかし、レイアウトの問題があり、以下のように商品画像コンテナ要素を押し上げます:

データ リストのレイアウトの問題 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>

どうすれば問題を乗り越えることができますか?

前もって感謝します。

4

2 に答える 2

2

私も同様の問題を抱えていました。リンクされた画像とテキストを独自の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-21T18:40:16.763 に答える
0

これを修正する方法は頭の中でよくわかりませんが、コントロールのスタイリングの代わりに、各項目を<div>orに配置<span>して CSS クラスを使用することから始めます。例えば：

<Item Template>
  <div class="myClass">...</div>
</Item Template>

これを Firebug で使用してデバッグすることは、通常、コントロールの高さなどにどのように違反しているかを把握するよりも簡単です。

于 2009-07-21T18:33:27.713 に答える