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グリッド-テーブルレスデザイン用

基本的なYUIグリッドCSSは、4つのプリセットページ幅、6つのプリセットテンプレート、および2、3、または4列の細分化された領域をスタックおよびネストする機能を提供します。4kbファイルは、1000を超えるページレイアウトの組み合わせを提供します。

2.）960グリッドシステム：システムの前提はラピッドプロトタイピングに最適ですが、実稼働環境に統合した場合も同様に機能します。印刷可能なスケッチシート、デザインレイアウト、および同じ測定値を持つCSSファイルがあります。

于 2012-11-02T18:16:35.670 に答える