2013-09-22 2 views
1

Я хочу разместить элементы управления на странице, где я хочу, например, увидеть сетку слева, и пары текстовых полей и меток справа. как я могу это сделать? , потому что, когда я пытаюсь перетащить это просто помещает текстовые поля и метки под видом сетки или вверх зрения (он прилипает к табличном)Поместите элементы управления asp.net в разные места на странице

+0

Простой способ добавить HTML сетки/таблицы на страницу и использовать строки/столбцы и выровнять. – FeliceM

+1

Я думаю, вы должны изучить основы HTML, прежде чем начинать с ASP.NET, и такие элементы управления, как GridView –

ответ

2

Вы можете контролировать макет страницы:

1 .) Использование CSS. путем использования <div>, <span> теги и т.д.

2.) Использование таблиц

Использование таблиц для разметки страниц действительно спорно и многие рекомендуют не использовать его. Во всяком случае, это совершенно другой вопрос. Тем не менее это проверить: Why is using tables for website layout such an evil

Using CSS:

Page Markup:

<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

см ниже ссылки на другие примеры:

Смежные вопросы