Question

我对C＃MVC有些新意，并且在我的解决方案中使用了部分视图。当我在一个视图中渲染两个或多个局部视图时，我看到它们从上到下呈现（当它们被渲染时，它们在页面上出现在下一个上面），这正是我所期望的。 / p>

有没有办法指定部分视图以并排或网格方式呈现？我问，因为有很多空白区域，所以将这些部分视图中的内容放在这个空格中是理想的。

Answer 1

示例1

您可以将部分视图包装在某些div元素中并将其设置为display: inline-block，这会使它们并排显示。

CSS样式：

div.sidebyside { display: inline-block; vertical-align: top; }

查看：

<div class="sidebyside">@Render.Partial(...)</div>
<div class="sidebyside">@Render.Partial(...)</div>

示例2

您可以将div安排到表格布局中：

CSS样式：

div.table { display: table; }
div.row { display: table-row; }
div.cell { display: table-cell; }

查看：

<div class="table">
    <div class="row">
        <div class="cell">@Render.Partial(...)</div>
        <div class="cell">@Render.Partial(...)</div>
    </div>
</div>

Answer 2

是的。这与您的样式（CSS）有关。您可能想要检查一下以获得基本想法：

http://www.c-sharpcorner.com/UploadFile/db2972/partial-view-sample-in-mvc-day-35/

Answer 3

问题并非来自＆＃34; PartialView＆＃34;零件。 html元素的经典行为是垂直显示：https://jsfiddle.net/xff9qvn6/

您有多种解决方案可以水平对齐它们：

使用<table>代码：https://jsfiddle.net/xff9qvn6/5/
使用display:inline-block css样式：https://jsfiddle.net/xff9qvn6/4/
使用float:left css样式：https://jsfiddle.net/xff9qvn6/3/

Answer 4

我刚刚使用了display：flex

并排局部视图。

有没有办法在C＃MVC中渲染两个部分视图，使它们在一个视图中并排显示？

4 个答案:

示例1

示例2