Question

是否可以将一个局部视图的宽度设置为与其他部分相同？

我的应用程序中有两个部分视图。第一个是文件上传，第二个是数据表（使用DataTables - datatables.net）。

上传文件时，上传控件下会显示一个日志。当显示日志时，我希望此视图扩展为与其下方的表格相同的宽度（或者更确切地说，它的大小与其内容所需的一样大，以桌子为中心，并且不比表格宽）。但是我无法让它工作 - 我似乎很难获得高宽度和高度的正确！

Html.RenderPartial("UploadFileView", Model.Log);
Html.RenderPartial("TableView", Model.Table);

UploadFileView.cshtml：

<fieldset class="fieldset-border fieldset-auto-width">
    <legend class="legend-border-fix">Upload file</legend>
    <div id="element1">
        <input type="file" name="file" />
    </div>
    <div id="element2">
        <button class="imageButton" id="uploadButton"><span class="glyphicon glyphicon-cloud-upload"></span></button>
    </div>

    <div id="log">
        @{ if (Model != null)
            {
                // Render log in a <textarea>...</textarea>
            }
        }
    </div>
</fieldset>

TableView.cshtml：

<fieldset class="fieldset-auto-width">
    <table id="thisTable" class="default-table stripe hover table-bordered">
        @* Headers *@
        <thead>
            <tr>
                @foreach (System.Data.DataColumn col in Model.Columns)
                {
                    <th>@col.ColumnName</th>
                }
            </tr>
        </thead>

        @* Data *@
        <tbody>
            @foreach (System.Data.DataRow row in Model.Rows)
            {
                <tr>
                    @foreach (System.Data.DataColumn col in Model.Columns)
                    {
                        <td>@row[col]</td>
                    }
                </tr>
            }
        </tbody>
    </table>
</fieldset>

CSS：

fieldset.fieldset-auto-width {
    display: inline-block; /* Make field sets as wide as their contents */
}

#element1 {
    display: inline-block;
    margin-right: 10px;
} 
#element2 {
    display: inline-block;
}

在上传之前，我们有：

上传后上传区域保持相同的宽度：

Answer 1

要在日志出现时增加“上载文件”字段集的宽度，您需要增加日志区域的大小，因为它是确定其宽度的字段集的内容。要使“选择文件”行居中，您只需将text-align: center应用于父元素，假设此行中的项目都是inline或inline-block。

设置部分视图的可变宽度

1 个答案: