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

我读过很多与使用表格或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)

@资源.机构
@DropDownListFor（model=>model.AgencyId，（（IEnumerable）ViewBag.possibleAgences）。Select（option=>newselectListItem{
Text=Html.DisplayTextFor（=>option）.ToString（），
Value=option.AgencyId.ToString（），
所选=（Model！=null）&&（option.AgencyId==Model.AgencyId）
})，“选择…”）
@Html.ValidationMessageFor（model=>model.AgencyId）

---

我只需要使用div标签就可以了

有一个div容器，然后在里面放两个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>

.集装箱{
宽度：100%；
身高：100%；
位置：绝对位置；
左：0
排名：0
}
.左{
宽度：20%；
身高：100%；
浮动：左；
}
.对{
宽度：80%；
身高：100%；
浮动：对；
}

---

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

我只需要使用div标记即可

有一个div容器，然后在里面放两个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>

.集装箱{
宽度：100%；
身高：100%；
位置：绝对位置；
左：0
排名：0
}
.左{
宽度：20%；
身高：100%；
浮动：左；
}
.对{
宽度：80%；
身高：100%；
浮动：对；
}

---

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

只需使用已经存在的标签，为它们添加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，使其看起来更好。

只需使用已经存在的标签并为它们添加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，使其看起来更好