c# - 在 mvc asp.net 中将单个列拆分为三列（视图中）

Question

嗨，我的所有观点都有以下代码

    @foreach (var group in Model.FieldGroup)
                    {

                        <table class="collapsableTable" style="margin-left: 3%;">
                            <tr class="collapsibleTitle">
                                <td width="6%" valign="top">
                                    <span class="accordionIconOff"></span>
                                </td>
                                <td width="94%" valign="top">@group.GroupName</td>
                            </tr>
                            <tr class="collapsibleContent">
                                <td colspan="2">
                                    <table>
                                        @foreach (var field in group.Fields)
                                        {
                                            <tr>
                                                <td>
                                                    @Html.CheckBox(field.FieldName)
                                                    @Html.LabelFor(model => field.FieldName, field.FieldName)
                                                </td>
                                            </tr>
                                        }
                                    </table>
                                </td>
                            </tr>
                        </table>

我的模型就像

public class FieldGroup
{
    public string GroupName { get; set; }

    public List<FieldModel> Fields { get; set; }
}

并且该领域有

 public class FieldModel
 {
    public int FieldId { get; set; }

    public string FieldName { get; set; }
 }

并在视图中生成一个带有复选框的归档列表作为单列，但我必须在一列中有 10 个字段组，下一个 10 到下一列等等..所以我的视图似乎像 3 列布局？ ?

任何人都可以尽快帮助我！

我得到这样的东西

但我希望我的观点是这样的

Answer 1

听起来您正在使用表格进行布局，而不是表格数据，这通常被认为是禁忌。

我建议改变你的内部循环：

<table>
    @foreach (var field in group.Fields)
    {
        <tr>
            <td>
                @Html.CheckBox(field.FieldName)
                @Html.LabelFor(model => field.FieldName, field.FieldName)
            </td>
        </tr>
    }
</table>

到

<div class="field-container">
    @foreach (var field in group.Fields)
    {
        <div class="field">
            @Html.CheckBox(field.FieldName)
            @Html.LabelFor(model => field.FieldName, field.FieldName)
        </div>
    }
</div>

然后使用 CSS 排列复选框：

.field-container {
    width: 600px;
}

.field-container .field {
    width: 200px;
    float: left;
    margin: 5px 0;
}

Answer 2

希望这会有所帮助

.col1
{
    width: 33.3%;
    min-width: 200px;
    float: left;
}

.col2
{
    width: 33.3%;
    min-width: 200px;
    float: left;
}

.col3
{
    width: 33.3%;
    min-width: 200px;
    float: left;
}