Html 内容在2列页面上的列不正确
我有一个页面，我试图根据“ReportItemCategoryID”制作两个独立的内容栏。如果！=8，它在左栏。如果它==8，则在右列中。两列格式正在工作，但我遇到了一个无法解决的问题。有5条内容应该在左列col1中，1条内容应该在右列col2中。当foreach循环执行时，它们正确地列出div ID的值5 have col1和1 have col2。有人能给我解释一下为什么第一个foreach循环中的4个类别出现在第二列而不是第一列吗Html 内容在2列页面上的列不正确,html,css,Html,Css,我有一个页面，我试图根据“ReportItemCategoryID”制作两个独立的内容栏。如果！=8，它在左栏。如果它==8，则在右列中。两列格式正在工作，但我遇到了一个无法解决的问题。有5条内容应该在左列col1中，1条内容应该在右列col2中。当foreach循环执行时，它们正确地列出div ID的值5 have col1和1 have col2。有人能给我解释一下为什么第一个foreach循环中的4个类别出现在第二列而不是第一列吗 +----------------------------
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
+-------------------------------------+
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
+-------------------------------------+
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
+-------------------------------------+
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
+-------------------------------------+
将col1和col2 div移到foreach循环之外。这确保了每个foreach循环都在其各自的div中运行。我将发布此答案，以防有其他人遇到同样的问题
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
+-------------------------------------+
<div class="row-fluid">
<div id="col1" class="span6 pull-left">
@foreach (var group in Model.Where(i => i.Active && i.ReportItemCategory.Active && i.Visible && i.ReportItemCategoryID!=8).GroupBy(i => i.ReportItemCategoryID).OrderBy(i => i.FirstOrDefault().ReportItemCategory.Name))
{
<ul class="nav nav-list">
<li class="nav-header">
<div class="input-append">
<div rel="tooltip" title="@group.First().ReportItemCategory.Description">
<img src="@Url.Content("~/img/folder-horizontal.png")" alt="Folder" style="margin-bottom:-3px;"/>
<span>@group.FirstOrDefault().ReportItemCategory.Name</span>
</div>
<ul class="nav nav-list">
@foreach (var item in group.OrderBy(i => i.Name))
{
<li>
<div class="input-append" rel="tooltip" title="@item.Description">
<img src="@Url.Content("~/img/chart.png")" alt="Report" style="margin-bottom:-3px;"/>
<a href="#" onclick="javascript:newPopup('@Url.Action("ViewReport", "Reporting", new { id = item.ReportItemID })');return false;">@item.Name</a>
</div>
</li>
}
</ul>
</div>
</li>
</ul>
}
</div>
<div id="col2" class="span6 pull-left">
@foreach (var group in Model.Where(i => i.Active && i.ReportItemCategory.Active && i.Visible && i.ReportItemCategoryID==8).GroupBy(i => i.ReportItemCategoryID).OrderBy(i => i.FirstOrDefault().ReportItemCategory.Name))
{
<ul class="nav nav-list">
<li class="nav-header">
<div class="input-append">
<div rel="tooltip" title="@group.First().ReportItemCategory.Description">
<img src="@Url.Content("~/img/folder-horizontal.png")" alt="Folder" style="margin-bottom:-3px;"/>
<span>@group.FirstOrDefault().ReportItemCategory.Name</span>
</div>
<ul class="nav nav-list">
@foreach (var item in group.OrderBy(i => i.Name))
{
<li>
<div class="input-append" rel="tooltip" title="@item.Description">
<img src="@Url.Content("~/img/chart.png")" alt="Report" style="margin-bottom:-3px;"/>
<a href="#" onclick="javascript:newPopup('@Url.Action("ViewReport", "Reporting", new { id = item.ReportItemID })');return false;">@item.Name</a>
</div>
</li>
}
</ul>
</div>
</li>
</ul>
}
</div>
</div>