asp.net - .Net 转发器中 div 的 CSS

Question

我有一个插入 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; }

Answer 1

只是一个想法:如果您说它们只会在垂直长度上发生变化，您可以考虑定义一些更大的 div 作为列并让元素在其中垂直复制(由 float: left 定位)。

然后您可以将列标识符附加到每个 div 的 ID，然后为它们设置样式并尝试操纵外观，以便保持您想要的表格结构，即分布高度。

<div class="divImg_column<x>">
    ...