1

たとえば、左側にグリッド ビューを配置し、右側にテキスト ボックスとラベルのペアを配置するなど、ページにコントロールを配置したいと考えています。どうすればそれができますか？ドラッグアンドドロップしようとすると、テキストボックスとラベルがグリッドビューの下またはビューの上に配置されるためです(グリッドビューに固執します)

4

1 に答える 1

2

ページのレイアウトを制御できます。

1.) CSS の使用。<div>、<span>タグなどを使用して

2.) テーブルの使用

ページ レイアウトにテーブルを使用することは、実際には議論の余地があり、多くの人がテーブルを使用しないことを推奨しています。とにかく、それはまったく別の質問です。まだこれをチェックしてください：ウェブサイトのレイアウトにテーブルを使用するのはなぜそんなに悪いのですか

Using CSS:

ページのマークアップ:

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-left"></div>
        <div id="content-main"></div>
        <div id="content-right"></div>
    </div>
    <div id="footer"></div>
    <div id="bottom"></div>
</div>

CSS:

#wrapper {
        width:900px;
        margin:0px auto;
        border:1px solid #bbb;
        padding:10px;
    }
#header {
        border:1px solid #bbb;
        height:80px;
        padding:10px;
    }
    #content {
        margin-top:10px;
        padding-bottom:10px;
    }
    #content div {
        padding:10px;
        border:1px solid #bbb;
        float:left;
    }
    #content-left {
        width:180px;
    }
    #content-main {
        margin-left:10px;
        width:500px;
    }
    #content-right {
        margin-left:10px;
        width:134px;
    }
    #footer {
        float:left;
        margin-top:10px;
        margin-bottom:10px;
        padding:10px;
        border:1px solid #bbb;
        width:878px;
    }
    #bottom {
        clear:both;
        text-align:right;
    }

*Output:*

ここに画像の説明を入力

Using tables:

 <table width="500" border="0">
    <tr>
       <td colspan="2" style="background-color:#FFA500;">
          <h1>Main Title of Web Page</h1>
       </td>
   </tr>    
   <tr>
       <td style="background-color:#FFD700;width:100px;">
          <b>Menu</b><br>
             HTML<br>
             CSS<br>
            JavaScript
      </td>
      <td style="background-color:#eeeeee;height:200px;width:400px;">
          Content goes here</td>
   </tr>    
   <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            Copyright Note</td>
   </tr>
</table>

Output:

ここに画像の説明を入力

その他の例については、以下のリンクを参照してください。

于 2013-09-23T06:19:25.750 に答える