Создание макета с двумя столбцами с использованием CSS для ASP.NET MVC3 create view

Я новичок в CSS. У меня есть страница создания записей, и в ней есть элементы html, такие как текстовые поля, раскрывающиеся списки, списки множественного выбора. View create.html выглядит следующим образом:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>

        <div class="editor-label">
            @Html.LabelFor(model => model.SDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.SDate)
            @Html.ValidationMessageFor(model => model.SDate)   
             @Html.EditorFor(model => model.STime)
            @Html.ValidationMessageFor(model => model.STime)         
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EDate)
        </div>

        <div class="editor-field">
            @Html.EditorFor(model => model.EDate)
            @Html.ValidationMessageFor(model => model.EDate)
            @Html.EditorFor(model => model.ETime)
            @Html.ValidationMessageFor(model => model.ETime)
        </div>


         <div class="editor-label">
            @Html.LabelFor(model => model.SitID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("SiteID", new SelectList(ViewBag.Sit as System.Collections.IEnumerable, "SitID", "SitName"), "Select a Sit", new { id = "ddlSit" })

            @Html.ValidationMessageFor(model => model.SitID)
        </div>



        <div class="editor-label">
            @Html.LabelFor(model => model.UnitID)
        </div>
        <div class="editor-field">

            @Html.ListBoxFor(Model => Model.SelectedUnits, new SelectList(ViewBag.Unit as System.Collections.IEnumerable, "UnitID", "UnitName"), new { id = "ddlUnit", size="4", style = "width: 150px"  })
            @Html.ValidationMessageFor(model => model.UnitID)
        </div>


         <div class="editor-label">
            @Html.LabelFor(model => model.DestID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("DestID", "--Select One--")
            @Html.ValidationMessageFor(model => model.DestID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.RestID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("RestID", "--Select One--")
            @Html.ValidationMessageFor(model => model.RestID)
        </div>

         <div class="editor-label">
            @Html.LabelFor(model => model.Desc)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Desc, 10, 55, null)
            @Html.ValidationMessageFor(model => model.Desc)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>


    </fieldset>
}

Определенный стиль CSS выглядит следующим образом:

fieldset 
{

    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

.display-label, 
.editor-label 
{

    margin: 1em 0 0 0; 
}

.display-field, 
.editor-field 
{
    margin: 0.5em 0 0 0; 
}

Теперь в представлении все отображается с выравниванием по левому краю, а под каждой меткой отображается текстовое поле. Я хотел бы иметь красивый двухколоночный макет в представлении, чтобы мне не приходилось прокручивать эту страницу вниз, а также он будет выглядеть лучше, если у меня будет несколько полей в одной строке (например, startdate, enddate).

Пожалуйста, помогите мне. Спасибо!

5
задан answerseeker 18 July 2011 в 00:55
поделиться