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

Question

Я новичок в 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).

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

Answer 1

Если вы делаете div, каждый div (по умолчанию) находится в одной строке. Один из способов - выполнить следующие 3 шага.

1) установить высоту вашего ярлыка

2) установите положение ваших полей относительно

3) установите верхнюю часть ваших полей на -LABEL_HEIGHT

.display-label, 
.editor-label 
{
    height:24px;
    margin: 1em 0 0 0; 
}

.display-field, 
.editor-field 
{
    position:relative;
    top: -24px;
    float:right;
    margin: 0.5em 0 0 0; 
}

надеюсь, что это поможет