Question

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

下面的代码显然有一个标签的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;
}

然后移动<fieldset>标记之外的“创建”按钮。这是您需要移动的代码：

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

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

MVC3 - 从scaffolded结果创建列布局的最佳方法

2 个答案: