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