Question

我有一个三列DataList，我试图将从水平到垂直显示的三个项目包装起来。我相信阻止这种情况发生的问题是三列DataList，它应该改为一列DataList。

目前我正试图将“拳击手”div包装成真实但没有成功。

任何想法如何实现这一目标？

<div class="dottedx">
     <div class="wrapping">
        <asp:DataList ID="DataList2" runat="server" DataKeyField="ProductID" DataSourceID="SqlDataSource2" BorderColor="Black"
            CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatColumns="3" BorderWidth="0px" >
            <ItemTemplate>
                <div id="boxer" class="column">
                    <asp:Image ID="Image1" runat="server"  ImageUrl='<%# "~/images/topimages/" & Eval("Image") %>' cssclass="topimage" />
                    <br /><br />
                    ProductID:
                      <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' />
                    <br />
                    Name:
                      <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
                    <br />
                </div>
            </ItemTemplate>  
        </asp:DataList>
     </div>
    </div>

Answer 1

您是否尝试过使用 float：left ？

也许您可以发布一个视觉示例？

Answer 2

我通过制作布局流程并删除repeatcolumns = 3来解决这个问题。通过浮动：左侧物品侧向排序。

在重新调整浏览器大小时，在DataList中垂直包装项目

2 个答案: