0

在此处输入图像描述

我正在尝试使用 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 的表结构。我很感激帮助

4

3 回答 3

2

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

<!--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>
于 2012-11-02T18:38:28.713 回答
1

你可以这样做：

<div>
    <div style="clear:both;">
        <div style="float:left;width:50%;">
            <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
        </div>
        <div style="float:left;width:50%;">
            <asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
        </div>
    </div>
    <div style="clear:both;">
        <div style="float:left;width:50%;">
            <asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
        </div>
        <div style="float:left;width:50%;">
            <asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
        </div>
    </div>
</div>

如果您想获得一些填充/边距，您可以将另一个 div 添加到单元格 div 中：

<div style="float:left;width:50%;">
    <div style="border:solid 1px black;padding:5px;margin:1px;">                
            <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
    </div>
</div>

JsFiddle DEMO或这里是一个带有类的演示（使用style不是一个好主意，所以我创建了几个类并从 div 标签中删除了样式）

于 2012-11-02T18:22:10.133 回答
0

查看：

1.) YUI Grids - 用于无表设计

基础的 YUI Grids CSS 提供了四种预设页面宽度、六个预设模板，以及堆叠和嵌套两列、三列或四列的细分区域的能力。4kb 文件提供超过 1000 种页面布局组合。

2.) 960 Grid System：该系统的前提非常适合快速原型制作，但在集成到生产环境中时同样可以正常工作。有可打印的草图、设计布局和具有相同测量值的 CSS 文件。

于 2012-11-02T18:16:35.670 回答