Tworzenie dwóch układów kolumn za pomocą CSS dla ASP.NET MVC3 widok utworzenia

Question

Jestem nowy w CSS. Mam stronę tworzenia rekordów i zawiera ona elementy HTML, takie jak pola tekstowe, listy rozwijane, listy wielokrotnego wyboru. Widok create.html jest następujący:

@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 styl zdefiniowany jest następująco:

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; 
} 

Teraz wyświetlany widok jest wszystko tak wyrównane do lewej i poniżej Każda etykieta jest wyświetlane pole tekstowe. Chciałbym mieć ładne dwa układy colmn w widoku, tak, żebym nie musiał przewijać w dół na tej stronie, a także będzie wyglądać ładniej, jeśli mam kilka plików w tym samym wierszu (np. Data początkowa, data końcowa).

Proszę, pomóż mi. Dziękuję Ci!

Answer 1

Jeśli robisz divy, każdy div jest (domyślnie) w jednym wierszu. Jednym ze sposobów jest wykonanie 3 następujących kroków.

1) ustala wysokość oznaczyć

2) ustawić pozycję z was dziedzinach względnej

3) Ustaw górny swoich dziedzinach -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; 
} 

nadzieję, że pomaga