ASP.NET用のCSSを使用して2つの列レイアウトを作成する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; 
} 

左揃えおよび各ラベルの下にテキストボックスが表示されるように、ビューがすべてを表示されます。 私はそのページで下にスクロールする必要がないように、同じ行（例：開始日、終了日）にいくつかのfiledsがある場合は、見栄えが良いように、ビュー内に2つのcolmnレイアウトを表示したいと思います。

私を助けてください。ありがとうございました！

Answer 1

divを実行している場合、すべてのdivは（デフォルトでは）1行にあります。 1つの方法は、以下の3つのステップを実行することです。

1））は、あなたの高さが

2にラベルを付ける設定された相対

3にごフィールドの位置を設定する）こと

.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ためにあなたの分野のトップを設定します助けてください