Question

我想在我想要的页面上放置控件，例如左侧的网格视图和右侧的文本框和标签对。我怎么能这样做？因为当我尝试拖放时，只需将文本框和标签放在网格视图下或视图上方（它粘在网格视图上）

Answer 1

您可以控制页面的布局：

1。）使用CSS。使用<div>，<span>标签等

2。）使用表格

使用表格进行页面布局实际上是有争议的，许多人建议不要使用它。无论如何，这完全是一个不同的问题。仍然请查看：Why is using tables for website layout such an evil

<强> 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:*

enter image description here

<强> 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:

enter image description here

有关更多示例，请参阅以下链接：

将asp.net控件放在页面的不同位置

1 个答案: