ASP.NET 용 CSS를 사용하여 두 개의 열 레이아웃 만들기 MVC3보기 만들기

Question

CSS를 처음 사용했습니다. 레코드 만들기 페이지가 있고 텍스트 상자, 드롭 다운 목록, 다중 선택 목록과 같은 html 요소가 있습니다. 다음과 같이보기 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)에 fileds가 거의없는 경우 해당 페이지에서 아래로 스크롤하지 않아도 멋지게 보일 수 있도록 뷰에서 두 개의 colmn 레이아웃을 멋지게 만들고 싶습니다.

도와주세요. 고맙습니다!

Answer 1

div를 사용하는 경우 모든 div는 기본적으로 한 행에 있습니다. 한 가지 방법은 다음 세 단계를 수행하는 것입니다.

1)는

2

가) 당신의 필드의 상단이

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

희망을 -LABEL_HEIGHT로 설정 상대

3)로하면 필드의 위치를 ​​설정 레이블의 높이를 설정하는 도와주세요