html - 数据列表中的元素并排

Question

我正在尝试并排设置数据列表中的元素。目前这些元素确实并排出现，但第二个元素比第一个低约 30 像素，第三个比第二个低约 30 像素。有什么想法可以让它们以一种很好的方式水平对齐吗？

我的风格:

.wrapping {
    float: left;
    border-width: 2px;
    border-style: dashed;
}
  #boxer {
    /* basic */
    background-color: #fff;
    margin: 10px;
    padding: 60px;
    text-align: center; /* border-radius */
}

我的 list :

<asp:DataList ID="myDataList" runat="server" BorderColor="Black" CellPadding="5" CellSpacing="5" RepeatLayout="Flow">
  <ItemTemplate>
    <div class="wrapping">  
        <div id="boxer" >
              <asp:Image ID="Image1" runat="server"  ImageUrl='<%# "~/images/topimages/" & Eval("ImageName") %>' cssclass="topimage" />
                <br /><br />
                ProductID:<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' />
                <br />Name:<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("ProductName")%>' />
                <br />
        </div>
    </div>
  </ItemTemplate>
</asp:DataList>

Answer 1

在 DataList 中添加 RepeatDirection="Horizo​​ntal" 后，它按预期工作。