0

x個のdivを挿入するaspリピーターがあります。これらの div 内のコンテンツは垂直方向の長さが異なる可能性があるため、リピーターは現在、表形式の行のような構造を表示しています。

長さに関係なく、各リピーターアイテムがその上のアイテムのすぐ下に表示されるように、リピーターコンテンツのスタイルを設定する方法について誰かがアイデアを持っていることを望んでいました.

だから現在、私のリピーター出力。

Item1  Item2 Item3
Item1  Item2 Item3
Item1  Item2 Item3
Item1  Item2 Item3
       Item2 Item3
       Item2 Item3
             Item3

Item4 Item5  Item6
Item4 Item5  Item6
Item4 Item5  Item6

出力する必要がある場合：

Item1  Item2 Item3
Item1  Item2 Item3
Item1  Item2 Item3
Item1  Item2 Item3       
Item4  Item2 Item3
Item4  Item5 Item3
Item4  Item5 Item6
Item4  Item5 Item6
Item4  Item5 Item6

それが理にかなっていることを願っています。どんな提案でも大歓迎です。

HTML

 <asp:repeater ID="rpItems" runat="server"><HeaderTemplate><div style=""></HeaderTemplate>
    <ItemTemplate>
        <div class="divImg">
            <asp:Literal ID="litImage" runat="server" />            
            <div class="divImgInfo">
                <p>                                
                    <asp:Literal ID="litTitle" runat="server" EnableViewState="false" />
                </p>
                <p>    
                    <div style="font-size: 11px; color: #919191;" >
                        <asp:Literal ID="litItemPrice" EnableViewState="false" runat="server" /> &nbsp;&nbsp;
                        <asp:Literal ID="litItemComments" EnableViewState="false" runat="server" />                                                                        
                    </div>                                                                                               
                </p>
            </div>              
        </div>
    </ItemTemplate>
    <FooterTemplate></div></FooterTemplate>
</asp:repeater>

CSS

.divImg { width: 170px; margin: 0px 0 0 0;   background-color: #ffffff; display: inline-block; vertical-align: top; margin: 3px; }
.divImg img { max-width: 150px; padding: 8px; }
.divImgOverlay {position:relative;margin-top:0;padding:0 18px 0 6px;display:none;height:0;max-height:38px;overflow:hidden;}
.divImgInfo {padding:0px 1px 0 10px; }
.divImgInfo div {margin:0 0 0 0; }
4

1 に答える 1

0

単なるアイデア: 垂直方向の長さだけが異なると言う場合は、いくつかの大きな div を定義して列として機能させ、要素をそれらの中で垂直方向に複製できるようにすることを検討できます (float: left によって配置されます)。

次に、列識別子を各 div の id に追加し、それらのスタイルを設定し、ルック アンド フィールを操作して、必要な表構造、つまり高さの分散を維持することができます。

<div class="divImg_column<x>">
    ...
于 2012-12-21T16:02:21.167 に答える