asp.net - 这个表结构如何实现DIV

Question

我正在尝试使用 div 复制此表结构。

<asp:Table ID="tblAnnualReportServiceForm" runat="server" Width="100%" CellSpacing="1" CellPadding="5">
    <asp:TableRow >
        <asp:TableCell HorizontalAlign="Left">
            <asp:Table ID="Table1" runat="server" CellSpacing="1" CellPadding="5">
                <asp:TableRow>
                    <asp:TableCell>
                        <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow >
                    <asp:TableCell>
                        <asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
                    </asp:TableCell>
                </asp:TableRow>             
            </asp:Table>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

我试过下面的 DIV，我没有太多的 CSS 经验。

<div>
    <div  style="float:left">
         <asp:Label ID="Label1" runat="server" Text="Start Date"></asp:Label>
    </div>
    <div>
        <asp:TextBox ID="TextBox1" Width="130px" runat="server"></asp:TextBox>
   </div>    
   <div>
        <asp:Label ID="Label2" runat="server" Text="End Date"></asp:Label>
        <asp:TextBox ID="TextBox2" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
  </div>
</div>  

任何指针都会有很大帮助。我有太多需要转换为 DIV 的表结构。感谢您的帮助

Answer 1

复制表的一般结构是这样的。

<!--table-->
<div>
        <!--tr-->
        <div style="clear:both"></div>
                <!--td-->
                <div style="float:left">
                </div>
                <!--td-->
                <div style="float:right">
                </div>
        <!--tr-->
        <div style="clear:both"></div>
                <!--td-->
                <div style="float:left">
                </div>
                <!--td-->
                <div style="float:right">
                </div>
        <!--tr-->
        <div style="clear:both"></div>
</div>