Форматирование Divs для MVC - как?

Question

Если я создаю страницу, используя только элементы DIV - как бы я выровнял ее с тем, что показано на рисунке ниже?Каков наилучший подход (кроме проб и ошибок :)

У меня нет опыта работы с css, и если вы ответите, используйте его, пожалуйста, предоставьте краткое объяснение.

Бонус: как я могу легко выровнять первый столбец по правому краю?

Answer 1

Так вы обычно и поступите, учитывая следующую разметку:

   HTML :

    <div class="label">Name</div>
    <div class="field"><input type="text" name="xxx"></div>

    CSS:

    .label
    {
      float:left;
      clear: left;
      text-align:right;
    }

    .field
    {
        float:left   
        padding-left:10px;
     }

В основном добавьте класс метки к первому элементу div, а класс поля - ко второму. и затем повторите шаблон для каждого из ваших полей в форме.

Edit: Для 3 столбцов:

<div class="label">Name</div>
<div class="field"><input type="text" name="xxx"></div>
<div class="field">Help Text  ...blah blah blah</div>

Просто примените поле класса к любым элементам div, которые вы хотите отобразить в одной строке. Примените метку класса к любому div, который вы хотите начать в новой строке.