MVC3 - 从脚手架结果创建列布局的最佳方法

Question

我已经阅读了很多与使用表格或 CSS 相关的条目/外部网站，但我想知道使用 MVC 脚手架创建的布局的最佳实践方法是什么。

下面的代码显然有一个用于标签的 div 类和另一个用于字段的 div 类，然后重复视图中的尽可能多的对。

我想要一个两列布局，因为默认的脚手架输出会创建一个非常长的页面并浪费屏幕空间。

最好的答案是创建一个表格或创建另外两个 div 并控制 CSS 中的位置，从而创建两列。

<div class="editor-label">
@Resources.Agency
</div>

<div class="editor-field">
@Html.DropDownListFor(model => model.AgencyId,         ((IEnumerable<PartnerWebWI.Models.Agency>)ViewBag.PossibleAgencies).Select(option => new SelectListItem {
    Text = Html.DisplayTextFor(_ => option).ToString(), 
    Value = option.AgencyId.ToString(),
    Selected = (Model != null) && (option.AgencyId == Model.AgencyId)
}), "Choose...")
@Html.ValidationMessageFor(model => model.AgencyId)

Answer 1

我只是用 div 标签来做到这一点。

有一个 div 容器，然后在其中放入 2 个 div。

我会做类似下面的事情

    <style type="text/css">
         .container{
             width: 100%;
             height: 100%;
             position: absolute;
             left: 0
             top: 0
          }

          .left{
               width: 20%;
               height: 100%;
               float: left;
          }

          .right{
               width: 80%;
               height: 100%;
               float: right;
          }

    </style>

<div class="container">

<!-- left container-->
<div class="left"></div>

<!--Right container-->
<div class="right"></div>
</div>

我会做类似的事情。如果 div 与 CSS 中的不完全一样，请原谅我，但本质上，您可以使用 div 标签完成这一切，并根据您想要的页面的哪一侧设置每个 div 类或 ID，并设置它们的宽度/高度和其他属性。

Answer 2

只需使用已经存在的标签并为它们添加 CSS 即可。

.editor-label
{
    width: 20%;
    height: 100%;
    float: left;
}

.editor-field
{
    width: 80%;
    height: 100%;
    float: right;
}

然后将“创建”按钮移到

标记之外。这是您需要移动的代码：

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

您可以更改两个字段的 CSS，使其看起来更好。