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 回答