我一直在使用新的 razor View 引擎来摆弄 asp.net mvc 3。
我的目标是拥有一个固定流动的 2 列布局，每列都有一个 jqGrid。但我没有运气!一旦我将网格添加到右列，它的标题就会变大。我不认为它的 jqGrids 错误，因为如果我删除样式，两个网格都会按预期显示。
我看到 jqGrid 的 css 将 display: block 作为 ui-helper-clearfix 类的一部分应用于标题。
有人有任何建议让这个工作或其他我可以尝试的固定流体CSS(我已经尝试了网上的一堆模板但没有运气)？
模板文件中的代码:
... <style type="text/css">
#left { float: left; width: 400px;}
#content { margin-left: 400px;}
</style>
</head>
<body>
<div>
<div id="left">
@RenderSection("SPTreeGrid")
</div>
<div id="content">
@RenderSection("ClientPickerGrid")
</div>
</div>
</body>
更新:
我的页面实际上需要在左侧显示 2 个固定宽度的网格，在右侧显示一个流动的网格。
这是我的 css 的问题(我仍然不知道为什么)，但我最终使用了以下有效的布局(rail 是左列):
#container{
overflow:hidden;
padding-left:400px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content
{
width:100%;
border-left:400px; /* The width and color of the rail */
margin-left:-400px;
float:right;
}
#rail{
width:400px;
float:left;
margin-left:-400px;
display:inline; /* So IE plays nice */
}
cshtml:
<div id="container">
<div id="content">
@RenderSection("ReportGrid")
</div>
<div id="rail">
@RenderSection("SPTreeGrid")
@RenderSection("ClientPickerGrid")
</div>
</div>
最佳答案
虽然 Oleg 的建议确实修复了标题的高度，但它并不构成解决方案 - 至少如果您希望右侧的 div 是液体的并扩展到浏览器窗口的宽度，则不是。问题是，为了在右侧网格容器上使用 float:left，您必须指定宽度。 float 元素必须具有与其关联的显式宽度(如果没有，它们将采用其中最宽元素的宽度)。
对我有用的一个解决方法是将 float 高度设置为较小的值(1px)，并为该 div 的内容设置明确的高度。
我创建了一个jsFiddle example这说明了问题和解决方法。
关于css - jqGrid 中的大标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5669138/